/* ll-video.css  [LL-VIDEO 2026-09-19, skins 2026-09-19]
   ------------------------------------------------------------------------
   The vehicle video card, mixed into dealer inventory and the Offers page.

   WHY THESE ARE COLOURED AND THE VEHICLE CARDS ARE NOT
   The first version of this card was white with a grey border, because it was
   built to sit quietly among the vehicle cards. Sitting quietly is exactly
   wrong. A shopper scrolling forty near identical white blocks has stopped
   reading by the tenth; a card that matches them perfectly is a card nobody
   notices, and a video nobody plays is worth nothing to the store. So the
   still stays honest and the body of the card is given a colour, and each one
   down the page is given a different one.

   EIGHT SKINS, FIVE FILLED AND THREE LIGHT. The ratio matters. All eight
   filled would turn a page of inventory into a wall of colour and the cards
   would start cancelling each other out, which is the same problem as all of
   them being white. The light skins are the rests between the loud ones.

   A skin is picked from the video id, so it never changes under a shopper as
   the grid repaints, and neighbours are nudged apart so the same colour never
   lands twice in a row.

   CONTRAST IS MEASURED, NOT ASSUMED. Every ink and ground pairing here was
   checked by rendering the card and reading the pixels, because half of these
   paint with a gradient and a gradient has no background colour for a script
   to read. See gates/contrast-video.js. Targets 4.5:1 for anything read word
   by word, 3.0:1 for the headline and the small caps eyebrow.
   ------------------------------------------------------------------------ */

.llv-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  /* The grid sets the height, never this card. Cards that size themselves
     leave a ragged row wherever the copy runs one line longer. */
  align-self: start;
  text-align: left;
  font-family: inherit;
  /* Defaults, so a card whose skin class somehow never landed is still a
     perfectly good white card rather than an unstyled one. */
  --llv-a: #1565c0;
  --llv-a-ink: #fff;
  --llv-body: #fff;
  --llv-ink: #14181f;
  --llv-ink-2: #4b5563;
  --llv-eye: #6b7280;
  background: var(--llv-body);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 20px rgba(16, 24, 40, .08);
  transition: box-shadow .2s ease, transform .2s ease;
}

.llv-card:hover {
  box-shadow: 0 3px 6px rgba(16, 24, 40, .09), 0 16px 34px rgba(16, 24, 40, .17);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------- the still */

.llv-shot {
  position: relative;
  display: block;
  width: 100%;
  /* A fixed sixteen by nine box. The still goes in it with object-fit, which
     crops, so nothing is ever squashed to fit and the card's height is known
     before the picture has loaded. That second part is what keeps the row from
     jumping as the thumbnails arrive. */
  aspect-ratio: 16 / 9;
  background: #0f1115;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
  .llv-shot { height: 0; padding-bottom: 56.25%; }
}

.llv-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  transition: transform .4s ease;
}

.llv-card:hover .llv-thumb { transform: scale(1.04); }

/* A wash under the chips so white type survives a pale still. NEUTRAL, always.
   The first version tinted the foot of the picture with the card's own colour,
   to tie the photograph to the body. On screen that turned the bottom third of
   a manufacturer's own footage magenta, teal or orange, and the Toyota badge
   in the corner of the frame went with it. Recolouring a manufacturer's film
   to match our card is not a nice touch, it looks cheap and it is theirs. The
   join between picture and body is the three pixel accent seam below, which
   does the same job and touches nothing. */
.llv-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 30%,
                               rgba(0,0,0,0) 54%, rgba(0,0,0,.46) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------- play button */

.llv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--llv-play-bg, rgba(255, 255, 255, .95));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  transition: transform .2s ease;
}

.llv-card:hover .llv-play { transform: translate(-50%, -50%) scale(1.09); }

/* The triangle is drawn, not a glyph: a play character renders as a different
   shape in every font stack and as an emoji in some of them. */
.llv-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid var(--llv-play-ink, #12151a);
}

/* A ring that breathes out once every few seconds. It is the one moving thing
   on a page of parked cars, which is the whole point of it, and it is drawn
   with transform and opacity only so it costs the compositor nothing. */
.llv-play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--llv-play-bg, rgba(255, 255, 255, .95));
  opacity: 0;
  animation: llv-ring 3.6s ease-out infinite;
}

@keyframes llv-ring {
  0%   { transform: scale(.86); opacity: 0; }
  22%  { opacity: .85; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* ------------------------------------------------------------------- chips */

.llv-src,
.llv-dur {
  position: absolute;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1.5;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.llv-src {
  left: 10px;
  top: 10px;
  background: var(--llv-chip-bg, rgba(10, 12, 16, .76));
  color: var(--llv-chip-ink, #fff);
}

.llv-dur {
  right: 10px;
  bottom: 10px;
  background: rgba(10, 12, 16, .76);
  color: #fff;
}

/* The manufacturer talking about its own vehicle is the strongest thing the
   card has, so that chip is the one that takes the card's colour. */
.llv-src.llv-maker {
  background: var(--llv-a);
  color: var(--llv-a-ink);
}

/* ------------------------------------------------------------------- copy */

.llv-body {
  padding: 13px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  position: relative;
}

.llv-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--llv-eye);
}

.llv-title {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.32;
  font-weight: 800;
  color: var(--llv-ink);
  /* Two lines, then stop. A video title can run to sixty words and the card
     has to stay the height of a vehicle card next to it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.llv-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--llv-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.llv-cta {
  margin-top: auto;
  padding-top: 11px;
  font-size: 13px;
  font-weight: 800;
  color: var(--llv-cta-ink, var(--llv-ink));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.llv-cta .llv-arrow {
  transition: transform .2s ease;
  font-size: 15px;
  line-height: 1;
}

.llv-card:hover .llv-cta .llv-arrow { transform: translateX(4px); }

/* ===========================================================================
   THE SKINS
   Five filled, three light. Each one sets the accent, the body and the three
   inks, and then adds one structural mark of its own so that two cards in the
   same family are still telling each other apart by more than hue.
   ======================================================================== */

/* --- 1. EMBER. Burnt orange into a deep red. The loudest of the set. ----- */
.llv-skin-ember {
  --llv-a: #ea580c;
  --llv-a-ink: #fff;
  --llv-body: linear-gradient(160deg, #c2410c 0%, #7c2d12 100%);
  --llv-ink: #fff;
  --llv-ink-2: #fde5d3;
  --llv-eye: #fdba74;
  --llv-play-bg: #fff;
  --llv-play-ink: #c2410c;
  --llv-cta-ink: #fff;
}

/* --- 2. INDIGO. Deep blue violet. ---------------------------------------- */
.llv-skin-indigo {
  --llv-a: #4f46e5;
  --llv-a-ink: #fff;
  --llv-body: linear-gradient(160deg, #4338ca 0%, #2e1065 100%);
  --llv-ink: #fff;
  --llv-ink-2: #ddd9fb;
  --llv-eye: #a5b4fc;
  --llv-play-bg: #fff;
  --llv-play-ink: #4338ca;
  --llv-cta-ink: #fff;
}

/* --- 3. TEAL. Deep teal into a forest green. ----------------------------- */
.llv-skin-teal {
  --llv-a: #0d9488;
  --llv-a-ink: #fff;
  --llv-body: linear-gradient(160deg, #0f766e 0%, #134e4a 100%);
  --llv-ink: #fff;
  --llv-ink-2: #d0f0ec;
  --llv-eye: #7ee0d3;
  --llv-play-bg: #fff;
  --llv-play-ink: #0f766e;
  --llv-cta-ink: #fff;
}

/* --- 4. PLUM. Magenta into a dark aubergine. ----------------------------- */
.llv-skin-plum {
  --llv-a: #c026d3;
  --llv-a-ink: #fff;
  --llv-body: linear-gradient(160deg, #a21caf 0%, #581c5e 100%);
  --llv-ink: #fff;
  --llv-ink-2: #f6d9f9;
  --llv-eye: #f0abfc;
  --llv-play-bg: #fff;
  --llv-play-ink: #a21caf;
  --llv-cta-ink: #fff;
}

/* --- 5. NOIR. Near black with a gold accent. The quiet expensive one. ---- */
.llv-skin-noir {
  --llv-a: #f59e0b;
  --llv-a-ink: #1c1207;
  --llv-body: linear-gradient(160deg, #1f2430 0%, #0b0d12 100%);
  --llv-ink: #fff;
  --llv-ink-2: #cfd4de;
  --llv-eye: #fbbf24;
  --llv-play-bg: #f59e0b;
  --llv-play-ink: #1c1207;
  --llv-cta-ink: #fbbf24;
}

/* A hairline of the accent along the top of the body, which on the filled
   skins is the seam between the picture and the colour. */
.llv-skin-ember .llv-body::before,
.llv-skin-indigo .llv-body::before,
.llv-skin-teal .llv-body::before,
.llv-skin-plum .llv-body::before,
.llv-skin-noir .llv-body::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--llv-a);
}

/* --- 6. SUNRISE. White, with a thick amber band across the top. ---------- */
.llv-skin-sunrise {
  --llv-a: #d97706;
  --llv-a-ink: #fff;
  --llv-body: #fffbf3;
  --llv-ink: #1c1917;
  --llv-ink-2: #57534e;
  --llv-eye: #b45309;
  --llv-play-bg: #d97706;
  --llv-play-ink: #fff;
  --llv-cta-ink: #9a3412;
  --llv-chip-bg: rgba(28, 25, 23, .8);
}
.llv-skin-sunrise .llv-body::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%);
}

/* --- 7. COBALT. White, framed in an electric blue hairline. -------------- */
.llv-skin-cobalt {
  --llv-a: #1d4ed8;
  --llv-a-ink: #fff;
  --llv-body: #f7f9ff;
  --llv-ink: #0f172a;
  --llv-ink-2: #475569;
  --llv-eye: #1d4ed8;
  --llv-play-bg: #1d4ed8;
  --llv-play-ink: #fff;
  --llv-cta-ink: #1d4ed8;
}
.llv-skin-cobalt { box-shadow: 0 0 0 2px #1d4ed8, 0 8px 22px rgba(29, 78, 216, .2); }
.llv-skin-cobalt:hover { box-shadow: 0 0 0 2px #1d4ed8, 0 16px 34px rgba(29, 78, 216, .3); }

/* --- 8. MINT. A soft green wash with a rule down the left. --------------- */
.llv-skin-mint {
  --llv-a: #15803d;
  --llv-a-ink: #fff;
  --llv-body: #f2fbf5;
  --llv-ink: #0f2a18;
  --llv-ink-2: #3f6b4f;
  --llv-eye: #15803d;
  --llv-play-bg: #15803d;
  --llv-play-ink: #fff;
  --llv-cta-ink: #14532d;
}
.llv-skin-mint .llv-body::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
}
.llv-skin-mint .llv-body { padding-left: 20px; }

/* On a light skin the call to action is a filled pill. A white card needs one
   solid block of colour low down or the eye slides straight off it, and this
   is also what keeps the three light skins from reading as the same card in
   three tints: a filled pill against the filled skins' plain text. */
.llv-skin-sunrise .llv-cta,
.llv-skin-cobalt .llv-cta,
.llv-skin-mint .llv-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--llv-a);
  color: var(--llv-a-ink);
  border-radius: 999px;
  padding: 8px 15px;
  margin-bottom: 1px;
}

/* Sunrise keeps a bright pill and takes near black ink on it. White on amber
   measured 3.58:1, which is under the 4.5 a line of text has to clear, and the
   two ways out were to darken the amber until white worked or to darken the
   ink. Darkening the amber turns the one sunny card in the set brown, so the
   ink moved instead: 4.9:1 at the orange end and 8.1:1 at the yellow end. It
   also means the three light skins are no longer the same pill in three
   colours, which is worth having on its own. */
.llv-skin-sunrise .llv-cta {
  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%);
  color: #1c1917;
}
.llv-skin-mint .llv-cta    { background: linear-gradient(90deg, #15803d 0%, #0f766e 100%); }
.llv-skin-cobalt .llv-cta  { background: linear-gradient(90deg, #1d4ed8 0%, #4338ca 100%); }

/* ---------------------------------------------------------------- playing */

.llv-shot.llv-live { cursor: default; }
.llv-shot.llv-live::after { display: none; }

.llv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 640px) {
  .llv-play { width: 56px; height: 56px; }
  .llv-play::before { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
  .llv-body { padding: 12px 14px 14px; }
  .llv-skin-mint .llv-body { padding-left: 18px; }
  .llv-title { font-size: 14.5px; }
  .llv-desc { -webkit-line-clamp: 2; }
}

/* A visitor who has asked their system for less movement gets none of it,
   including the ring, which is the one thing here that moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .llv-card,
  .llv-thumb,
  .llv-play,
  .llv-cta .llv-arrow { transition: none; }
  .llv-card:hover { transform: none; }
  .llv-card:hover .llv-thumb { transform: none; }
  .llv-play::after { animation: none; }
}

/* Keyboard focus has to be visible on the still, which is the tap target, and
   on a card whose own colour is close to the usual focus blue. */
.llv-shot:focus-visible,
.llv-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 5px #0f172a;
}

.llv-skin-sunrise .llv-cta:focus-visible,
.llv-skin-cobalt .llv-cta:focus-visible,
.llv-skin-mint .llv-cta:focus-visible {
  outline-color: #0f172a;
  box-shadow: 0 0 0 5px #fff;
}

/* ===========================================================================
   THE THEATRE
   ---------------------------------------------------------------------------
   Pressing play takes the film out of the grid and puts it on a layer of its
   own: large on the left, and on the right the store's own answer to it,
   starting with that exact vehicle when the lot has one.

   The layout is the whole idea, so it is written twice on purpose. Wide, it is
   two columns and the rail scrolls beside a video that does not move. Narrow,
   a 392px rail beside a video is two columns of nothing, so the film goes
   across the top and the vehicles sit under it two abreast, which is the shape
   a phone actually reads.

   Z-INDEX, MEASURED, BECAUSE THE NUMBERS IN THE STYLESHEETS LIE.
   The order on a dealer page is:

       2147483000  .llp-lb          the promo card lightbox
       2147482500  .llv-th          this layer
       2147482000  .llo-overlay     the Offers page
       2147482000  .llf-overlay     the Vehicle Finder
             10000  the host page's own modals

   ll-promo.css also carries a 2147483000 that looks like it belongs to the
   Offers page and does not: it is the lightbox. The Offers page computes to
   2147482000, which is what lets this layer open over it. That was checked
   with elementFromPoint rather than read off a rule, because reading the rule
   gives the wrong answer. If this number is ever raised above the lightbox,
   the promo ask will open behind it.

   The enquiry no longer leaves this layer at all, so none of the host page's
   modals come into it any more.
   ======================================================================== */

.llv-th {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.llv-th-back {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, .82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.llv-th-panel {
  position: relative;
  width: 100%;
  max-width: 1380px;
  background: #0d1016;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  /* THE PANEL IS AS TALL AS THE FILM, and no taller.
     Two wrong versions got here. With max-height alone the single grid row was
     still sized by its content, so eighteen vehicle cards made the row two
     thousand pixels tall and the panel just clipped them: the last card sat
     below the bottom of the screen with no way to reach it, because the rail
     was never the thing that was too big. Forcing a full height row fixed the
     scrolling and left the film floating in a column of black, which looks
     like a mistake because it is one.
     What works is taking the list out of the height question altogether. It is
     positioned inside .llv-th-scroll, so the rail's own height is its heading
     and nothing else, the row is therefore as tall as the film beside it, and
     the list scrolls inside whatever that turns out to be. */
  /* dvh WITH A vh FALLBACK, the same pairing the promo and finder sheets on
     this box already use. On iOS Safari 100vh is the height of the window
     WITHOUT the address bar showing, so a panel sized in vh has its foot below
     the visible area the whole time the bar is up: on a phone that is the
     bottom of the vehicle rail, and on a tablet it is the bottom of the film.
     dvh is the height that is actually on screen right now. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

.llv-th-x {
  position: absolute;
  right: 10px;
  top: 8px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.llv-th-x:hover { background: rgba(255, 255, 255, .26); }

/* ------------------------------------------------------------------ left */

.llv-th-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.llv-th-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  flex: none;
}
@supports not (aspect-ratio: 16 / 9) {
  .llv-th-stage { height: 0; padding-bottom: 56.25%; }
}

.llv-th-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.llv-th-meta {
  padding: 16px 22px 20px;
  color: #fff;
  overflow: auto;
  min-height: 0;
}

.llv-th-src {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  margin-bottom: 9px;
}
.llv-th-src.llv-maker { background: #1d4ed8; }

.llv-th-title {
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: #fff;
}

.llv-th-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #c3cad6;
  max-width: 68ch;
}

/* ----------------------------------------------------------------- right */

.llv-th-rail {
  min-width: 0;
  background: #f4f6f9;
  border-left: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.llv-th-railhead {
  padding: 15px 16px 12px;
  border-bottom: 1px solid #e3e7ee;
  background: #fff;
  flex: none;
}

.llv-th-railtitle {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #15803d;
}

.llv-th-railsub {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
}

/* The wrapper that holds the scroll. It stretches to whatever height the row
   turns out to be, and its child is positioned, so the list's own length never
   feeds back into the layout. */
.llv-th-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.llv-th-list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.llv-th-empty {
  margin: 0;
  padding: 10px 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4b5563;
}

/* ------------------------------------------------------- a vehicle in the rail */

.llv-veh {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 11px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 11px;
  padding: 9px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.llv-veh:hover {
  border-color: #c3ccdb;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
  transform: translateY(-1px);
}

/* The one the film is actually about. It is first in the list and it says so,
   because a shopper who has just watched eight minutes about this exact car
   should not have to read four titles to work out which one it is. */
.llv-veh-hit {
  border-color: #15803d;
  box-shadow: 0 0 0 1px #15803d;
}

.llv-veh-shot.llv-noimg::after {
  /* ONLY WHEN THERE IS GENUINELY NO PHOTOGRAPH. This started out on every
     shot, which meant the words sat under each picture and showed through for
     as long as that picture took to arrive: a rail of "photo coming" that
     turned into cars a second later. Six vehicles out of five hundred and
     seventy nine on this lot actually have no photograph. The other five
     hundred and seventy three were being libelled by a stylesheet. */
  content: "Photo coming";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  /* Measured, not eyeballed: #9aa4b2 on this grey came out at 2.13:1 against a
     4.5 target. Same ink as the mileage line below it, which also makes the
     placeholder look like part of the card rather than a stray label. */
  color: #4b5563;
  text-transform: uppercase;
}
.llv-veh-shot { z-index: 0; }
.llv-veh-img { z-index: 1; }

.llv-veh-shot {
  position: relative;
  width: 108px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #e8ecf2;
}
@supports not (aspect-ratio: 4 / 3) {
  .llv-veh-shot { height: 0; padding-bottom: 75%; }
}

.llv-veh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.llv-veh-flag {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  /* Above the photograph. The photograph was given a z-index of its own so it
     would cover the "photo coming" placeholder underneath it, and that quietly
     put it over this ribbon as well: the exact car from the film kept its
     green border and lost the words that say why. */
  z-index: 2;
  background: #15803d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 2px;
}

.llv-veh-b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.llv-veh-t {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.llv-veh-m {
  margin: 0;
  font-size: 11.5px;
  color: #5b6472;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llv-veh-p {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}

.llv-veh-cta {
  margin-top: auto;
  align-self: flex-start;
  background: #111827;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.llv-veh-cta:hover { background: #000; }
.llv-veh-hit .llv-veh-cta { background: #15803d; }
.llv-veh-hit .llv-veh-cta:hover { background: #126c34; }

/* ============================ narrow ==================================== */
/* One column: the film across the top, the vehicles two abreast underneath.
   1024 rather than a phone width, because the rail needs 380px and a tablet
   in portrait does not have it to spare next to a video worth watching. */

@media (max-width: 1024px) {
  .llv-th { padding: 0; }

  .llv-th-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .llv-th-main { justify-content: flex-start; }

  .llv-th-main {
    overflow: visible;
    /* The film stays put at the top while the vehicles scroll under it, which
       is the whole point of the layer on a phone as much as on a desktop. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0d1016;
  }

  .llv-th-meta { padding: 11px 16px 13px; overflow: visible; }
  .llv-th-title { font-size: 15.5px; }
  .llv-th-desc { display: none; }
  .llv-th-src { margin-bottom: 6px; padding: 3px 7px; font-size: 10.5px; }

  .llv-th-rail { border-left: 0; border-top: 1px solid rgba(0,0,0,.12); }
  .llv-th-railhead { padding: 12px 14px 10px; }

  .llv-th-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 14px 22px;
  }

  /* Stacked, not side by side: at half a phone's width a 108px picture beside
     text leaves about sixty pixels for a vehicle's name. */
  .llv-veh {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .llv-veh-shot { width: 100%; aspect-ratio: 16 / 10; }
  @supports not (aspect-ratio: 16 / 10) {
    .llv-veh-shot { height: 0; padding-bottom: 62.5%; }
  }
  .llv-veh-cta { width: 100%; text-align: center; padding: 7px 10px; }
}

@media (max-width: 420px) {
  .llv-th-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .llv-veh { padding: 7px; }
  .llv-veh-t { font-size: 12px; }
  .llv-veh-p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .llv-veh { transition: none; }
  .llv-veh:hover { transform: none; }
}

/* ===========================================================================
   LOAD MORE, MANUFACTURER OFFERS, AND THE ASK
   ---------------------------------------------------------------------------
   Three things that all live in the rail beside a film that never stops.
   ======================================================================== */

.llv-th-morewrap { padding: 4px 0 2px; }

.llv-th-more {
  width: 100%;
  border: 1px dashed #b9c2d0;
  background: #fff;
  border-radius: 11px;
  padding: 11px 12px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  transition: border-color .15s ease, background .15s ease;
}
.llv-th-more:hover { border-color: #111827; background: #fbfcfe; }

.llv-th-morelabel { font-size: 13px; font-weight: 800; color: #111827; }
.llv-th-morenote  { font-size: 11px; color: #5b6472; }

.llv-th-done {
  margin: 2px 0 0;
  text-align: center;
  font-size: 12px;
  color: #5b6472;
  padding: 8px 0 2px;
}

/* --------------------------------------------------- a manufacturer offer */

.llv-off { border-color: #c8b273; background: #fffdf6; }
.llv-off:hover { border-color: #a4873a; }
.llv-off-flag { background: #8a6d1f; }

.llv-off-fig {
  margin: 1px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #6b5312;
  line-height: 1.2;
}
.llv-off-small { font-size: 11.5px; font-weight: 700; color: #7a6428; }
.llv-off-cta { background: #6b5312; }
.llv-off-cta:hover { background: #55410c; }

/* ------------------------------------------------------------- the ask ---
   Positioned over the list rather than replacing it, so the scroll position
   behind it survives and Back puts the shopper exactly where they were. */

.llv-ask {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.llv-ask-head { margin-bottom: 12px; }

.llv-ask-back {
  background: none;
  border: 0;
  padding: 0 0 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1d4ed8;
  cursor: pointer;
  font-family: inherit;
}
.llv-ask-back:hover { text-decoration: underline; }

.llv-ask-h {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
}

.llv-ask-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #5b6472;
}

.llv-ask-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.llv-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.llv-f-l {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #4b5563;
}

.llv-f-i {
  width: 100%;
  border: 1px solid #ccd3de;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}
.llv-f-i:focus { outline: 2px solid #1d4ed8; outline-offset: -1px; border-color: #1d4ed8; }

/* The browser's own placeholder grey measures 2.54:1 on white, which is under
   the bar for any text a person is expected to read, and a placeholder is the
   only thing telling them what shape an answer takes. */
.llv-f-i::placeholder { color: #6b7280; opacity: 1; }
.llv-f-i::-webkit-input-placeholder { color: #6b7280; }

textarea.llv-f-i { resize: vertical; min-height: 54px; line-height: 1.45; }

.llv-f-e { display: none; font-size: 11px; font-weight: 700; color: #b42318; }
.llv-f.bad .llv-f-i { border-color: #b42318; background: #fffafa; }
.llv-f.bad .llv-f-e { display: block; }

.llv-ask-form > .llv-f { margin-top: 10px; }

.llv-ask-pref { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.llv-ask-prefrow { display: flex; gap: 6px; flex-wrap: wrap; }

.llv-pref {
  border: 1px solid #ccd3de;
  background: #fff;
  color: #374151;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.llv-pref.on { background: #111827; border-color: #111827; color: #fff; }

.llv-ask-status {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #b42318;
  min-height: 0;
}
.llv-ask-status:empty { display: none; }

.llv-ask-send {
  margin-top: 12px;
  width: 100%;
  background: #15803d;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.llv-ask-send:hover { background: #126c34; }
.llv-ask-send:disabled { opacity: .65; cursor: default; }

.llv-ask-fine {
  margin: 9px 0 2px;
  font-size: 11px;
  line-height: 1.45;
  color: #5b6472;
  text-align: center;
}

/* the thank you, which stays in the rail so the film is never interrupted */
.llv-ask-done { text-align: center; padding: 26px 8px 8px; }

.llv-ask-tick {
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  font-size: 27px;
  line-height: 52px;
  font-weight: 800;
}

.llv-ask-doneh { margin: 0; font-size: 17px; font-weight: 800; color: #111827; }
.llv-ask-dones { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #4b5563; }

@media (max-width: 1024px) {
  /* The rail is a two column grid on a phone; the run of cards that are not
     vehicles should stretch across both of them. */
  .llv-th-morewrap,
  .llv-th-done { grid-column: 1 / -1; }
  .llv-ask { padding: 12px; }
  .llv-ask-grid { gap: 8px; }
}

@media (max-width: 420px) {
  .llv-ask-grid { grid-template-columns: minmax(0, 1fr); }
}

/* [FILL 2026-09-19, owner] On the Offers page the grid lays out as equal
   height rows, so a card that keeps its own height punches a hole in the row
   it sits in. These were the last holes left after the promo cards were fixed:
   up to three hundred pixels of nothing, every one of them under one of ours.
   In that grid the card stretches like its neighbours and the copy centres in
   whatever height it ends up with, rather than sitting at the top of a tall
   box with the button stranded at the bottom. */
.llo-grid .llv-card {
  align-self: stretch;
  max-height: 640px;
}
.llo-grid .llv-card .llv-body { justify-content: center; }
.llo-grid .llv-card .llv-cta { margin-top: 14px; }

/* A store that hides prices still needs the card to say what to do next,
   or the space where a price would be just reads as missing data. */
.llv-veh-noprice { font-size: 13px; font-weight: 700; color: #4b5563; }