/* ============================================================
   fleet-management.css — Mastery Logistics Systems
   Fleet Management page-specific styles.
   Global styles live in style.css.
   Desktop styles first. Mobile overrides at the bottom.

   COMPONENT REUSE:
   - .image-placeholder — same component used on configuration-portal
     and partners pages.
   - .card-visual — same image-led card used across the site.
   - .feature / .feature--reverse — alternating two-column feature
     block, same as configuration-portal.

   TITLE BLOCK CONVENTION (applies across all pages):
   - Eyebrow: no max-width
   - H2: no max-width — headlines flow at their natural width
   - Sub / lede in CENTERED title blocks: max-width: 640px, margin: 0 auto
   - LEFT-ALIGNED title blocks: constrained by their parent column
============================================================ */


/* ============================================================
   SHARED — IMAGE PLACEHOLDER COMPONENT
   Branded copper-on-dark frame with subtle grid texture and a
   label. Reused everywhere a screenshot zone hasn't been filled
   yet. When real images arrive, uncomment the <img> in the HTML
   and delete the .image-placeholder div.
============================================================ */
.image-placeholder {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, rgba(252, 147, 101, 0.16) 0%, transparent 62%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.image-placeholder__label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(252, 147, 101, 0.9);
  letter-spacing: 0.02em;
}

.image-placeholder__note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-placeholder--hero {
  aspect-ratio: 16 / 11;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.image-placeholder--feature {
  aspect-ratio: 16 / 11;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column: H1 + sub + CTA on left, screenshot on right.
   Mirrors the pattern from configuration-portal and platform.
============================================================ */
.fleet-hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Full-bleed hero artwork (blank left half carries the copy),
   matching the Carrier Management hero treatment. */
.fleet-hero--full-bleed {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 38vw, 620px);
}

.fleet-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

.fleet-hero--full-bleed > .container {
  width: 100%;
}

/* Inline mobile rendering of the full-bleed artwork — hidden on
   desktop, shown between the sub text and the CTA on mobile. */
.fleet-hero__mobile-media {
  display: none;
}

.fleet-hero__mobile-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.fleet-hero--full-bleed .fleet-hero__inner {
  display: block;
}

.fleet-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(178, 93, 66, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.fleet-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}

.fleet-hero__content {
  max-width: 480px;
}

.fleet-hero .eyebrow {
  color: var(--color-copper-light);
}

.fleet-hero__headline {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.fleet-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  max-width: 460px;
}

.fleet-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fleet-hero__media {
  position: relative;
  width: 100%;
}

.fleet-hero__image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   SECTION 2 — CUSTOMER LOGO STRIP
   Compact horizontal band. 10 customer logos in a flex-wrap
   layout that arranges itself to viewport width — likely one
   row on wide desktops, two rows on tablets, several on mobile.

   The .customer-logo wrapper holds either:
   (a) <img> with the real logo file, or
   (b) the .customer-logo__placeholder pill with the brand name
   Until real logos arrive, the placeholder shows the company name
   styled in copper so the section never renders broken.
============================================================ */
.fleet-logos {
  background: #000000;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.5px solid #1f1f1f;
}

.fleet-logos__tagline {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin: 0 0 1.5rem;
}

.fleet-logos__slider {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.fleet-logos__track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: fleetLogoScroll 100s linear infinite; /* scales with the logos per loop half, keeping the scroll speed steady */
}

.fleet-logos__slider:hover .fleet-logos__track {
  animation-play-state: paused;
}

@keyframes fleetLogoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fleet-logos__logo {
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleet-logos__logo img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition-normal);
}

.fleet-logos__slider:hover .fleet-logos__logo img {
  opacity: 1;
}


/* ============================================================
   SECTION 3 — BRIDGE
   Dark, centered. Single bold H2 with the closing phrase
   highlighted in copper. No eyebrow. No sub. Pure punch.
============================================================ */
.bridge {
  background: #faf6f3;
  padding: 1.75rem 0;
  border-top: 0.5px solid rgba(178, 93, 66, 0.12);
  border-bottom: 0.5px solid rgba(178, 93, 66, 0.12);
  text-align: center;
}

.bridge__glow {
  display: none;
}

.bridge__content {
  max-width: 760px;
  margin: 0 auto;
}

.bridge__heading {
  color: var(--color-text-primary);
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

.bridge__highlight {
  color: var(--color-copper);
}


/* ============================================================
   FEATURE BLOCK (Sections 4 & 5 — Fleet Hierarchy + Equipment)
   White section. Two-column: content + screenshot. Headline + 3
   checkmark bullets, no eyebrow, no paragraph. The .feature--reverse
   modifier flips column order so features alternate down the page.

   Same pattern as configuration-portal. Reused intentionally for
   site-wide consistency.
============================================================ */
.feature {
  background: var(--color-white);
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Alternating layout — image on the opposite side */
.feature--reverse .feature__content {
  order: 2;
}

.feature--reverse .feature__media {
  order: 1;
}

.feature__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 1.75rem;
}

.feature__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.feature__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.feature__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(178, 93, 66, 0.12);
  color: var(--color-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.feature__media {
  position: relative;
  width: 100%;
}

.feature__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Artwork on a transparent canvas rather than a card. A box shadow would
   outline the whole image box including the empty space around the
   diagram, so the shadow follows the shapes instead. */
.feature__image--plain {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}


/* ============================================================
   SECTION 6 — OPTIMIZE (2-card: Backhauls + EMR)
   Light warm. Centered title block, then a 2-card grid using
   the .card-visual component.

   Story: EMR finds the empty miles, Backhauls turn them into
   loaded miles. The two halves of the optimization loop.
============================================================ */
.optimize {
  background: #faf6f3;
}

.optimize__head {
  margin-bottom: 2.5rem;
}

.optimize__head .eyebrow {
  color: var(--color-copper-dark);
}

.optimize__head h2 {
  color: var(--color-text-primary);
  margin-top: 0.5rem;
  margin-bottom: 0.875rem;
}

.optimize__head .text-lead {
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: 0 auto;
}

.optimize__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}


/* ------------------------------------------------------------
   IMAGE-LED CARD COMPONENT (.card-visual)
   Same definition used on platform, configuration-portal, and
   partners detail pages. Kept here so this page is self-contained
   if the component isn't promoted to a global style.css.
------------------------------------------------------------ */
.card-visual {
  background: var(--color-white);
  border: 0.5px solid rgba(178, 93, 66, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-normal);
}

.card-visual:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-visual__image-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
}

.card-visual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The optimize-grid visuals are self-framed infographic SVGs (own
   dark card background) — contain instead of cover so nothing is
   cropped; the near-identical zone background hides the letterbox. */
.optimize__grid .card-visual__image {
  object-fit: contain;
  background: #191413;
}

.card-visual__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 30% 35%, rgba(252, 147, 101, 0.18) 0%, transparent 62%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
}

.card-visual__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.card-visual__placeholder-label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(252, 147, 101, 0.9);
  letter-spacing: 0.02em;
}

.card-visual__placeholder-note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-visual__body {
  padding: 1.5rem 1.5rem 1.625rem;
}

.card-visual__body h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.card-visual__body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}


/* ============================================================
   SECTION 7 — CASE STUDY: KEURIG DR PEPPER
   White. Two-column: thumbnail on the left, eyebrow + headline +
   sub + CTA on the right. Mirrors the implementation block layout
   from platform.css. White background separates from the warm
   #faf6f3 optimize section above and the dark CTA below.
============================================================ */
.case-study {
  background: var(--color-white);
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

.case-study__inner {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 3.5rem;
  align-items: center;
}

.case-study .eyebrow {
  color: var(--color-copper-dark);
}

.case-study__visual {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.case-study__image {
  width: 100%;
  height: auto;
  display: block;
}

.case-study__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.case-study__headline {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.case-study__sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}


/* ============================================================
   SECTION 8 — CTA BANNER
   Standard treatment, mirrors configuration-portal and platform.
============================================================ */
.cta-banner {
  background: #111111;
  border-top: 0.5px solid #1f1f1f;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(178, 93, 66, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  margin-bottom: 1rem;
}


/* ============================================================
   3-CARD GRID: TRACTORS · TRAILERS · DRIVERS
   (moved from customer-management.css)
   Light warm. Three cards with custom non-UI visuals built in
   HTML/CSS — no screenshots needed.
============================================================ */
.assets {
  background: #faf6f3;
}

.assets__head {
  margin-bottom: 2.5rem;
}

.assets__head .eyebrow {
  color: var(--color-copper-dark);
}

.assets__head h2 {
  color: var(--color-text-primary);
  margin-top: 0.5rem;
  margin-bottom: 0.875rem;
}

.assets__head .text-lead {
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

.assets__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}


/* ----- ASSET CARD SHELL ----- */
.asset-card {
  background: var(--color-white);
  border: 0.5px solid rgba(178, 93, 66, 0.18);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.asset-card__visual {
  aspect-ratio: 16 / 10;
  background: #fafafa;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.asset-card__body {
  padding: 1.25rem 1.375rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.asset-card__body h4 {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.asset-card__body p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}


/* ============================================================
   CARD VISUAL 1 — TRACTOR
   Truck silhouette + lane + active status indicator
============================================================ */
.tractor-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.tractor-vis__icon {
  width: 64px;
  height: 42px;
}

.tractor-vis__icon svg {
  width: 100%;
  height: 100%;
}

.tractor-vis__loc {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
}

.tractor-vis__status {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  color: var(--color-text-accent);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tractor-vis__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-copper);
  box-shadow: 0 0 0 3px rgba(178, 93, 66, 0.2);
}


/* ============================================================
   CARD VISUAL 2 — TRAILER
   Utilization stat (142 / 200) + progress bar
============================================================ */
.trailer-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  max-width: 160px;
}

.trailer-vis__label {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: var(--weight-bold);
}

.trailer-vis__num {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-copper);
  letter-spacing: -0.02em;
  line-height: 1;
}

.trailer-vis__of {
  font-size: 0.75rem;
  color: var(--color-text-accent);
  font-weight: var(--weight-medium);
}

.trailer-vis__bar {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.trailer-vis__fill {
  height: 100%;
  background: linear-gradient(90deg, #fc9365, #b25d42);
  border-radius: 4px;
}


/* ============================================================
   CARD VISUAL 3 — DRIVER HOS CLOCK
   Circular progress ring + HOS time + label
============================================================ */
.driver-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.driver-vis__clock {
  width: 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.driver-vis__clock svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.driver-vis__time {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  position: relative;
  line-height: 1;
}

.driver-vis__label {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: var(--weight-bold);
}


/* ============================================================
   RESPONSIVE — MOBILE OVERRIDES
============================================================ */
@media (max-width: 768px) {

  /* Hero — single column, screenshot below text */
  .fleet-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Full-bleed variant on mobile: drop the background artwork and
     show the hero image inline instead — stacked between the sub
     text and the CTA. */
  .fleet-hero--full-bleed {
    min-height: 0;
  }

  .fleet-hero__bg {
    display: none;
  }

  .fleet-hero__mobile-media {
    display: block;
    margin: 0.25rem 0 1.75rem;
    /* Squarer frame than the 2.33:1 source, right-anchored: crops
       away the artwork's blank left half so the trucks fill the
       slot. Fixed ratio also reserves space for CLS. */
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
  }

  .fleet-hero__mobile-image {
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .fleet-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .fleet-hero__content {
    max-width: 100%;
  }

  .fleet-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fleet-hero__actions > a {
    text-align: center;
    justify-content: center;
  }

  /* Logo strip — smaller logo height on mobile */
  .fleet-logos__logo {
    height: 28px;
  }

  /* Bridge heading shrinks gracefully via clamp() — nothing to adjust */

  /* Feature blocks — single column, image always above content on
     mobile regardless of desktop order (cleaner reading flow) */
  .feature__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .feature--reverse .feature__content,
  .feature--reverse .feature__media {
    order: initial;
  }

  .feature__media {
    order: 2;
  }

  .feature__content {
    order: 1;
  }

  /* Optimize — single column grid */
  .optimize__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Assets grid — single column */
  .assets__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Case study — single column with the thumbnail between the copy and
     the CTA. The copy column stops being its own box so its children lay
     out in the stack. */
  .case-study__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .case-study__copy {
    display: contents;
  }

  .case-study__visual {
    order: 1;
    margin-top: 0.75rem;
  }

  .case-study__copy > .btn-primary-lg {
    order: 2;
    align-self: flex-start;
    margin-top: 0.75rem;
  }

}

/* ============================================================
   ASK LEO STRIP
   Light warm band with a split card: white content left, shared
   leo-chat example right (see /leo.css). Mirrors the Leo strips
   on the reporting and optimization pages.
============================================================ */
.fleet-leo {
  background: #faf6f3;
}

.fleet-leo__card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-white);
  border: 0.5px solid rgba(178, 93, 66, 0.18);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}

.fleet-leo__content {
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fleet-leo__heading {
  margin-bottom: 0.75rem;
}

.fleet-leo__content p {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 400px;
}

.fleet-leo .leo-chat {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .fleet-leo__card {
    grid-template-columns: 1fr;
  }

  .fleet-leo__content {
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .fleet-leo .leo-chat {
    min-height: 220px;
    order: 2;
  }
}