/* ============================================================================
   Corrections a static capture needs, plus the styling of the elements this
   build adds to the source pages (the Dengage wordmark, the save hearts, the
   inline slots, the footer notice). Everything the demo layer itself draws
   lives in demo-controls.css; this file touches the captured page.
   ========================================================================== */

/* The engagement layer manages the hero carousel: the frozen slick transform
   goes, slides stack in one frame, and js/site.js crossfades them. */
.c_007_v2 .slick-track {
  transform: none !important;
  width: auto !important;
  display: block;
  position: relative;
}
.c_007_v2 .slick-slide {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  float: none !important;
}
.c_007_v2 .slick-slide:first-child { position: relative !important; }
.c_007_v2 .slick-cloned { display: none !important; }
/* The hero's thumbnail dots were laid out by script; on small screens they
   land mid hero as cropped tiles, and the crossfade advances on its own.
   The source sheet pins them with a more specific important rule, so this
   selector outranks it. */
@media (max-width: 640px) {
  div.c_007_v2 section.carousel.slick-slider ul.slick-dots,
  .c_007_v2 .slick-dots { display: none !important; }
}

/* Empty inline slots take no room until a campaign renders into them. */
.dn-inline-slot { min-height: 0; }
.dn-inline-slot iframe { display: block; margin-inline: auto; }

/* A hero video with no player becomes its poster. */
.dps-video-poster { width: 100%; display: block; object-fit: cover; }

/* The wordmark that replaces the source logo: the demo standard every
   Dengage demonstration carries, a red D, a red dot and the industry name,
   the same proportions as D-TELCO's. The name takes the header's own colour,
   so one mark serves the light interior headers, the home header floating
   over its hero and the dark footer. The icons are tools/build-brand.mjs. */
.dps-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: currentColor;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
/* Its parts take the mark's face, not the page's: the Lincoln capture names a
   typeface on every span, a regular cut with no bold, and the mark drew in
   it. */
.dps-brand > span { font-family: inherit; font-weight: inherit; }
.dps-brand-d { color: #E4002B; }
.dps-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: #E4002B; flex: none; }
@media (max-width: 760px) { .dps-brand { font-size: 20px; } }
/* Interior headers are light with dark text; the home header floats over the
   hero and is light-on-dark. The mark follows the header's own theme. */
header .dps-brand { color: #111111; }
/* The floating home header sits over the dark hero, and over whatever a page
   opens with above it: the source welcome strip and the inline cards under the
   header are light, and white letters there left only the red D and dot
   showing, seen on the published home page on 26 October 2026. So the mark
   carries its own ground there, as the Kicks and Patrol headers do. */
header.c_010D-is-floating .dps-brand {
  color: #ffffff;
  background: rgba(20, 24, 26, .78);
  padding: 9px 15px;
  border-radius: 999px;
}
footer .dps-brand { color: #ffffff; }

/* The mobile sidebar is the burger drawer's content, never page flow.

   THE TRANSFORM IS THE WHOLE FIX, and it is why the burger did nothing on a
   phone until 2 September. The captured stylesheet parks this drawer off the
   right edge with transform: translateX(100%) and slid it back by removing a
   class from <html> that this build does not use. Setting display, position
   and z-index here was not enough: the drawer opened, measured its full size,
   reported itself visible to any check that asked, and sat one screen width to
   the right of the viewport where nobody could see it. A check that reads
   computed style cannot catch that; only one that compares the box against the
   viewport can, which is what tools/mobile-check.mjs now does. */
header.c_010D aside.sidebar-mobile { display: none; }
header.c_010D.dps-menu-open aside.sidebar-mobile {
  display: block;
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  transform: none;
  width: min(420px, 92vw);
  height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  color: #111111;
  z-index: 70;
  padding: 24px;
  box-shadow: -18px 0 48px rgba(0, 0, 0, .3);
}
/* The right to left mirror parks it off the other edge, so it needs the same
   reset rather than the inherited translateX(-100%). */
html[dir="rtl"] header.c_010D.dps-menu-open aside.sidebar-mobile { transform: none; }

/* A 20 by 20 burger is a miss on a phone. The target grows to the 44 pixels a
   thumb needs, and the negative margin gives back exactly what the padding
   took, so the header lays out as it did. Setting a min-width instead widened
   the header row and pushed four to nine pixels of every page off the right
   edge, which the mobile audit caught within the hour: a fix for one phone
   problem is not worth a scrollbar on every page. */
header.c_010D .burger {
  padding: 12px;
  margin: -12px;
  box-sizing: content-box;
}
/* Over the floating home header the burger is white. A ground behind it let
   its lines run past the edge, so it carries a dark outline instead, which
   reads over the light strip a page opens with as well as over the hero. */
header.c_010D-is-floating .burger {
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)) drop-shadow(0 0 3px rgba(0, 0, 0, .5));
}

/* The save control this build adds to each model card. */
.dps-heart {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.dps-heart svg { width: 20px; height: 20px; }
.dps-heart.saved { color: #c3002f; border-color: #c3002f; }
.dps-heart.saved svg path { fill: #c3002f; stroke: #c3002f; }

/* The footer notice naming this a demonstration. */
.dps-notice {
  padding: 16px 24px 22px;
  font-size: 12px;
  line-height: 1.6;
  color: #9c9c9c;
  background: #000000;
  text-align: center;
}

/* The authored showroom directory and the QR block. */
.dps-branches { background: #ffffff; color: #111111; padding: 34px 0 60px; }
.dps-branches-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.dps-branches h2 { font-size: 26px; letter-spacing: .04em; margin: 0 0 6px; }
.dps-branches-note { color: #6e7275; font-size: 13.5px; margin: 0 0 22px; }
.dps-branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dps-branch { display: grid; gap: 5px; border: 1px solid #e3e3e3; padding: 16px 18px; }
.dps-branch b { font-size: 15.5px; }
.dps-branch span { font-size: 12.5px; color: #6e7275; }
.dps-branch a { font-size: 13px; color: #c3002f; }
.dps-qr {
  margin-top: 30px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  border: 1px solid #e3e3e3; border-inline-start: 4px solid #c3002f; padding: 20px 22px;
}
.dps-qr img { width: 140px; height: 140px; flex: none; }
.dps-qr b { font-size: 16px; display: block; margin-bottom: 4px; }
.dps-qr p { margin: 0; font-size: 14px; color: #444; line-height: 1.6; max-width: 560px; }
.dps-qr code { background: #f4f4f4; padding: 1px 6px; border-radius: 3px; }

/* The authored MAGNITE page: the home page lends header, footer and fonts. */
.dps-mini-pdp { background: #ffffff; color: #111111; }
.dps-mini-pdp .mini-hero img { width: 100%; display: block; }
.dps-mini-pdp .mini-head { max-width: 900px; margin: 0 auto; padding: 42px 20px 10px; text-align: center; }
.dps-mini-pdp .mini-kicker { font-size: 13px; letter-spacing: .3em; color: #6e7275; margin: 0 0 6px; }
.dps-mini-pdp h1 { font-size: 56px; letter-spacing: .06em; margin: 0 0 4px; }
.dps-mini-pdp .mini-tag { font-size: 18px; color: #444; margin: 0 0 14px; }
.dps-mini-pdp .mini-price { font-size: 15px; color: #555; margin: 0 0 26px; }
.dps-mini-pdp .mini-price strong { font-size: 22px; color: #111; margin-inline-start: 6px; }
.dps-mini-pdp .mini-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px; }
.dps-mini-pdp .mini-btn {
  font-size: 13px; letter-spacing: .08em; padding: 13px 22px;
  border: 1px solid #111111; background: #ffffff; color: #111111;
  text-decoration: none; border-radius: 999px; cursor: pointer;
}
.dps-mini-pdp .mini-btn.solid { background: #111111; color: #ffffff; }
.dps-mini-pdp .mini-btn:hover { border-color: #c3002f; color: #c3002f; }
.dps-mini-pdp .mini-btn.solid:hover { background: #c3002f; color: #fff; border-color: #c3002f; }
.dps-mini-pdp .mini-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; padding: 10px 20px 60px; }
.dps-mini-pdp .mini-gallery img { width: 100%; display: block; object-fit: cover; }
@media (max-width: 720px) {
  .dps-mini-pdp h1 { font-size: 38px; }
  .dps-mini-pdp .mini-gallery { grid-template-columns: 1fr; }
}

/* The offers hub grid this build authors from the site's own campaign pages. */
.dps-offers { padding: 34px 0 50px; }
.dps-offers-title {
  max-width: 1180px; margin: 0 auto 20px; padding: 0 20px;
  font-size: 34px; letter-spacing: .02em; color: #111;
}
.dps-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.dps-offer-card {
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: #111111;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  padding-bottom: 18px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.dps-offer-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.14); transform: translateY(-2px); }
.dps-offer-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.dps-offer-model {
  margin: 4px 18px 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: #c3002f;
  font-weight: 700;
}
.dps-offer-title { margin: 0 18px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.dps-offer-cta { margin: 4px 18px 0; font-size: 13px; letter-spacing: .06em; text-decoration: underline; }

/* The burger opens the captured meganav; these two rules are the whole of
   the open/closed state the source site drove with script. */
header.c_010D .meganav-container { display: none; }
header.c_010D.dps-menu-open .meganav-container {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .25);
  z-index: 60;
  max-height: calc(100vh - 90px);
  overflow: auto;
}
header.c_010D.dps-menu-open .c_010D-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 40;
}
header.c_010D .c_010D-meganav .vehicles-container { display: none; }
header.c_010D .c_010D-meganav .vehicles-container.active { display: block; }
header.c_010D .c_010D-meganav .categories > li.active { font-weight: 700; }

/* The booking form's model select matches its sibling fields in width. */
.model-form-group,
.model-form-group .custom-selectbox.select-model,
.model-form-group .custom-selectbox.select-model select { width: 100%; }

/* A submitted lead form is replaced by its confirmation. */
.dps-form-done {
  margin: 24px auto;
  max-width: 560px;
  padding: 28px 26px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-top: 3px solid #c3002f;
  font-size: 17px;
  line-height: 1.55;
  color: #111111;
}

/* The working finance calculator this build injects. */
#dps-finance {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 26px auto 40px;
  padding: 26px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
}
#dps-finance label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #555; }
#dps-finance select, #dps-finance input {
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
}
#dps-finance .fin-out { border-top: 1px solid #e3e3e3; padding-top: 16px; display: grid; gap: 4px; }
#dps-finance .fin-out span { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
#dps-finance .fin-out strong { font-size: 30px; color: #111; }
#dps-finance .fin-out small { color: #777; line-height: 1.5; }

/* The WhatsApp floater draws its glyph inline; the source icon font never
   shipped with the capture. */
a.whatsapp-button svg { width: 30px; height: 30px; display: block; }

/* The Patrol microsite reserved a square for a small logo mark; the Dengage
   wordmark needs its natural width, in white on that dark header. */
.headerTopHolder .logo-link { width: auto !important; aspect-ratio: auto !important; }
.headerTopHolder .dps-brand { color: #ffffff; }
/* The Kicks logo is fixed over every section of its page, light sky and black
   panels alike, so it carries its own ground, as the Patrol header does. */
.heroLogo .dps-brand {
  color: #ffffff;
  background: rgba(20, 24, 26, .78);
  padding: 9px 15px;
  border-radius: 999px;
}

/* The Patrol hero writes its name as two touching spans. */
h1.headTop span + span { margin-inline-start: 0.24em; }

/* Small screens: the floater shrinks clear of form buttons, and the closing
   notice leaves room so a page's last controls scroll above the fixed
   corner buttons. */
@media (max-width: 640px) {
  a.whatsapp-button { width: 48px !important; height: 48px !important; left: 16px !important; bottom: 16px !important; }
  a.whatsapp-button svg { width: 22px; height: 22px; }
  .dps-notice { padding-bottom: 108px; }
  /* Pages with their own sticky bottom bar keep it usable: the demo's fixed
     buttons and the floater lift above the bar. */
  body:has(.c_255) .dps-controls,
  body:has([class*="StickyBottomNav"]) .dps-controls { bottom: 92px; }
  body:has(.c_255) a.whatsapp-button,
  body:has([class*="StickyBottomNav"]) a.whatsapp-button { bottom: 92px !important; }
}

/* The price watch on every model page: the price_drop_alert audience. */
.dps-price-watch-host { display: flex; justify-content: center; padding: 6px 20px 26px; }
.dps-price-watch {
  display: grid;
  gap: 3px;
  text-align: center;
  font-family: inherit;
  background: #ffffff;
  color: #111111;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  max-width: 460px;
}
.dps-price-watch b { font-size: 14px; letter-spacing: .04em; }
.dps-price-watch span { font-size: 12px; color: #6e7275; }
.dps-price-watch.on { border-color: #c3002f; }
.dps-price-watch.on b { color: #c3002f; }
/* The Nissan experiences the demo draws itself, in the site's own palette.
   js/creatives.js explains why these are page creatives while the shared
   platform library in the same launcher still comes from Dengage. */
#dps-lc-host:empty { display: none; }

/* THE INLINE PLACEMENT.

   Every rule here is namespaced under .dps-lc-inline. Inline creatives are not
   sandboxed: the engine puts a served creative's style into document.head and
   clones its HTML into the target, so a bare `h3` or `.title` rule from one
   creative restyles the whole storefront. The wrapper itself carries no
   padding and no background of its own for the same reason, and the visible
   card is the element inside it. */
/* THE GAMES. Namespaced like everything else here. */
.dps-lc-wheel-wrap { position: relative; width: 200px; margin: 4px auto 12px; }
.dps-lc-wheel { display: block; width: 200px; height: 200px; }
.dps-lc-wheel-pin {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 14px solid #14181a;
}
.dps-lc-wheel-out { margin: 0 0 14px; font-weight: 700; text-align: center; }
.dps-lc-scratch { position: relative; width: 320px; max-width: 100%; height: 120px; margin: 4px auto 14px;
  border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid #d5d8da; }
.dps-lc-scratch-prize { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 17px; text-align: center; padding: 0 12px; }
.dps-lc-scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

/* THE TEMPLATE SHAPES.

   One shape per Dengage on-site template family, so a creative drawn here
   looks like the template it stands in for rather than like a generic card.
   Every rule is namespaced under .dps-lc-, the same discipline the inline
   block below follows and for the same reason. */
.dps-lc-panel.dps-lc-slide {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  top: auto;
  transform: none;
  width: min(340px, calc(100vw - 40px));
  border-radius: 6px;
  animation: dps-lc-slide-in .28s ease-out;
}
@keyframes dps-lc-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dps-lc-panel.dps-lc-wide { width: min(760px, calc(100vw - 40px)); }
.dps-lc-panel.dps-lc-tall { width: min(380px, calc(100vw - 40px)); }
/* A fixed panel with no top and no left sits where it would have sat in the
   page, which for one appended to the body is after everything else: eleven
   thousand pixels down a model page, under a scrim that covers the screen. So
   the three shapes that only set a width are centred the way the modal is. */
.dps-lc-panel.dps-lc-wide,
.dps-lc-panel.dps-lc-tall,
.dps-lc-panel.dps-lc-story {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dps-lc-panel.dps-lc-wide,
.dps-lc-panel.dps-lc-tall {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.dps-lc-panel.dps-lc-story {
  width: min(380px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #14181a;
  color: #fff;
}
.dps-lc-shot { display: block; width: 100%; height: auto; border-radius: 4px 4px 0 0; }
.dps-lc-panel.dps-lc-tall .dps-lc-shot { border-radius: 4px 4px 0 0; }
.dps-lc-bar .dps-lc-shot { width: 64px; height: 44px; object-fit: cover; border-radius: 3px; }
.dps-lc-story-frame { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center; padding: 20px; }
.dps-lc-story-frame h2 { color: #fff; margin: 0 0 6px; }
.dps-lc-story-frame p { color: rgba(255,255,255,.86); margin: 0 0 14px; }
/* An author display rule outranks the browser's own [hidden], so a frame
   marked hidden is hidden here, or every frame of a story shows at once. */
.dps-lc-story-frame[hidden] { display: none; }
/* Every frame carries a model photograph and some are studio shots on white.
   A shade rising from the bottom keeps the white copy readable on any of them. */
.dps-lc-story-frame { position: relative; cursor: pointer; }
.dps-lc-story-frame::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 14, .9) 0%, rgba(10, 12, 14, .6) 40%, rgba(10, 12, 14, 0) 72%); }
.dps-lc-story-frame > * { position: relative; }
.dps-lc-story-frame .dps-lc-kicker { color: #ffb3bf; }
.dps-lc-story-dots { display: flex; gap: 5px; padding: 12px 20px 0; }
.dps-lc-story-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.dps-lc-story-dots i.on { background: #fff; }
.dps-lc-scale { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; }
.dps-lc-scale button {
  flex: 1 0 auto; min-width: 34px; padding: 8px 0; border: 1px solid #d5d8da;
  background: #fff; border-radius: 3px; cursor: pointer; font-size: 13px;
}
.dps-lc-scale button:hover { border-color: #c3002f; color: #c3002f; }
.dps-lc-scale-ends { display: flex; justify-content: space-between; font-size: 11px; color: #83888c; }
.dps-lc-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dps-lc-choices button {
  text-align: left; padding: 11px 14px; border: 1px solid #d5d8da; background: #fff;
  border-radius: 3px; cursor: pointer; font-size: 14px;
}
.dps-lc-choices button:hover { border-color: #c3002f; }
.dps-lc-countdown { display: flex; gap: 10px; margin: 6px 0 16px; }
.dps-lc-countdown div { text-align: center; min-width: 52px; padding: 8px 6px; background: #14181a; color: #fff; border-radius: 4px; }
.dps-lc-countdown b { display: block; font-size: 20px; line-height: 1; }
.dps-lc-countdown span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
@media (max-width: 600px) {
  .dps-lc-panel.dps-lc-slide { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

[id^="dn_inline_target_"]:empty { display: none; }
/* THE SLOT CARRIES THE PAGE COLUMN. A slot that sits between full width
   sections ran its card edge to edge on a wide desktop, and the one under the
   price ran past both sides of the window: measured at 1920 pixels on 21
   October 2026. So every slot keeps to this storefront's column, 1200px, and to
   the window, centred wherever it sits in the markup, and a campaign served
   into it inherits the same edges. */
[id^="dn_inline_target_"] {
  box-sizing: border-box;
  max-width: min(1200px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}
.dps-lc-inline {
  position: relative;
  margin: 24px 0;
  padding: 20px 44px 20px 20px;
  border: 1px solid #e3e5e7;
  border-left: 3px solid #c3002f;
  border-radius: 4px;
  background: #fff;
}
.dps-lc-inline-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c3002f;
  margin-bottom: 6px;
}
.dps-lc-inline-body h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.dps-lc-inline-body p { margin: 0 0 14px; color: #55595c; font-size: 14px; line-height: 1.55; }
.dps-lc-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dps-lc-inline-actions .dps-lc-cta { display: inline-block; }
.dps-lc-inline-x {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #9aa0a4;
  cursor: pointer;
  padding: 4px 8px;
}
.dps-lc-inline-x:hover { color: #14181a; }
@media (max-width: 600px) {
  .dps-lc-inline { padding: 16px 40px 16px 16px; margin: 18px 0; }
  .dps-lc-inline-actions { flex-direction: column; align-items: stretch; }
}

/* A holder this build draws beside a slot, for the welcome strip and the
   form nudge: the same column and the same rule for empty as a slot. */
[data-lc-holder]:empty { display: none; }
[data-lc-holder] { box-sizing: border-box; max-width: min(1200px, calc(100vw - 32px)); margin-left: auto; margin-right: auto; }

/* THE WELCOME STRIP, THE MODEL CARD AND THE RANGE ROW. Namespaced under
   .dps-lc-inline like every inline rule here. The strip is the slim one,
   read in passing under the header; the model card carries a photograph
   beside its text and stacks on a phone. */
.dps-lc-inline.dps-lc-inline-strip { margin: 12px 0; padding: 12px 44px 12px 16px; }
.dps-lc-inline-strip .dps-lc-inline-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.dps-lc-inline-strip .dps-lc-inline-body h3 { margin: 0; font-size: 16px; }
.dps-lc-inline-strip .dps-lc-inline-body p { margin: 0; flex: 1 1 280px; }
.dps-lc-inline-model { display: flex; gap: 18px; align-items: center; }
.dps-lc-inline-shot { flex: 0 0 220px; width: 220px; max-width: 40%; height: auto; border-radius: 3px; object-fit: cover; }
.dps-lc-inline-model .dps-lc-inline-body { flex: 1 1 auto; min-width: 0; }
.dps-lc-inline-price { font-weight: 700; color: #14181a !important; }
.dps-lc-inline-range { display: flex; gap: 12px; margin: 10px 0 14px; flex-wrap: wrap; }
.dps-lc-inline-pick { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  color: inherit; text-decoration: none; }
.dps-lc-inline-pick img { width: 100%; height: 96px; object-fit: cover; border-radius: 3px; margin-bottom: 6px; }
.dps-lc-inline-pick span { font-size: 13px; color: #55595c; }
@media (max-width: 600px) {
  .dps-lc-inline-model { flex-direction: column; align-items: stretch; }
  .dps-lc-inline-shot { flex: none; width: 100%; max-width: 100%; }
  .dps-lc-inline-strip .dps-lc-inline-body { display: block; }
  .dps-lc-inline-strip .dps-lc-inline-body h3 { margin: 0 0 4px; }
  .dps-lc-inline-strip .dps-lc-inline-body p { margin: 0 0 10px; }
}
.dps-lc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 30, .55);
  z-index: 2147483000;
}
.dps-lc-panel {
  position: fixed;
  z-index: 2147483001;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 18px 48px rgba(20, 26, 30, .28);
  font-family: "ProximaNova", "Segoe UI", Arial, sans-serif;
}
.dps-lc-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-top: 3px solid #c3002f;
}
.dps-lc-bar {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 3px solid #c3002f;
}
.dps-lc-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #8b8f92;
  cursor: pointer;
  padding: 4px 8px;
}
.dps-lc-x:hover { color: #111111; }
.dps-lc-body { padding: 30px 28px 26px; }
.dps-lc-body h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: #111111;
}
.dps-lc-body p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6e7275;
}
.dps-lc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dps-lc-cta {
  display: inline-block;
  padding: 11px 22px;
  background: #111111;
  color: #ffffff;
  border: 0;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.dps-lc-cta:hover { background: #c3002f; color: #ffffff; }
.dps-lc-quiet {
  border: 0;
  background: none;
  color: #8b8f92;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 0;
}
.dps-lc-quiet:hover { color: #111111; }
.dps-lc-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 56px 18px 28px;
}
.dps-lc-bar-inner strong {
  display: block;
  font-size: 16px;
  color: #111111;
  margin-bottom: 3px;
}
.dps-lc-bar-inner span {
  display: block;
  font-size: 13.5px;
  color: #6e7275;
}
.dps-lc-field { display: block; margin-bottom: 14px; }
.dps-lc-field span {
  display: block;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6e7275;
  margin-bottom: 6px;
}
.dps-lc-field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e3e3e3;
  font-size: 15px;
  font-family: inherit;
  color: #111111;
  background: #ffffff;
}
.dps-lc-field input:focus { outline: 2px solid #c3002f; outline-offset: -2px; }
.dps-lc-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #6e7275;
}
.dps-lc-check input { margin-top: 2px; flex: none; }
.dps-lc-choices { margin-bottom: 20px; }
.dps-lc-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e3e3e3;
  margin-bottom: 8px;
  font-size: 14.5px;
  color: #111111;
  cursor: pointer;
}
.dps-lc-choice:hover { border-color: #c3002f; }
.dps-lc-choice input { flex: none; }
.dps-lc-done h2 { color: #c3002f; }

@media (max-width: 560px) {
  .dps-lc-body { padding: 26px 20px 22px; }
  .dps-lc-body h2 { font-size: 19px; }
  .dps-lc-bar-inner { padding: 16px 48px 16px 20px; }
  .dps-lc-actions { gap: 10px; }
}

.dps-lc-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c3002f;
  margin-bottom: 10px;
}
.dps-lc-summary {
  margin: 0 0 20px;
  border-top: 1px solid #f4f4f4;
}
.dps-lc-summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #f4f4f4;
}
.dps-lc-summary dt {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #8b8f92;
}
.dps-lc-summary dd {
  margin: 0;
  font-size: 14px;
  color: #111111;
  text-align: end;
  word-break: break-word;
}
.dps-lc-done p { margin-top: 4px; }

/* While a bar holds the foot of the page, the demo's own controls and the
   WhatsApp button step above it rather than hiding underneath. The button
   carries its position in a style attribute, hence the !important. */
body.dps-lc-bar-open .dps-controls { bottom: 124px; }
body.dps-lc-bar-open a.whatsapp-button { bottom: 124px !important; }
@media (max-width: 760px) {
  body.dps-lc-bar-open .dps-controls { bottom: 210px; }
  body.dps-lc-bar-open a.whatsapp-button { bottom: 210px !important; }
}
/* A bar Dengage drew at the foot of the window is lifted over the same way,
   by the height it holds, which js/creatives.js writes into --dps-served-bar.
   The SDK draws it under these controls, so where they stand they would
   cover its own close, and the WhatsApp button would be hidden beneath it.
   A page with a sticky bottom bar of its own keeps its lift as the least. */
body.dps-served-bar .dps-controls { bottom: calc(var(--dps-served-bar, 0px) + 18px); }
body.dps-served-bar a.whatsapp-button { bottom: calc(var(--dps-served-bar, 0px) + 25px) !important; }
@media (max-width: 640px) {
  body.dps-served-bar a.whatsapp-button { bottom: calc(var(--dps-served-bar, 0px) + 16px) !important; }
  body.dps-served-bar:has(.c_255) .dps-controls,
  body.dps-served-bar:has([class*="StickyBottomNav"]) .dps-controls {
    bottom: max(92px, calc(var(--dps-served-bar, 0px) + 18px));
  }
  body.dps-served-bar:has(.c_255) a.whatsapp-button,
  body.dps-served-bar:has([class*="StickyBottomNav"]) a.whatsapp-button {
    bottom: max(92px, calc(var(--dps-served-bar, 0px) + 16px)) !important;
  }
}

/* The inbox bell sits in the header beside the menu rather than floating over
   the page. The capture keeps two header clusters, one for each width, so each
   bell shows only where its cluster belongs. */
.dps-header-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #111111;
  cursor: pointer;
  vertical-align: middle;
}
.dps-header-bell svg { width: 22px; height: 22px; }
.dps-header-bell:hover { color: #c3002f; }
.dps-header-bell .dps-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #c3002f;
  color: #ffffff;
  font: 600 10px/16px Arial, sans-serif;
  text-align: center;
}
.header-right.desktop-none .dps-header-bell { display: none; }
@media (max-width: 991px) {
  .header-right-warpper .dps-header-bell { display: none; }
  .header-right.desktop-none .dps-header-bell {
    display: inline-flex;
    margin: 0 8px 0 0;
  }
}

/* Where the header has room the bell sits in it; on a phone the captured
   header collapses to a hamburger with nowhere to put one, so the floating
   bell stays there and only there. */
@media (min-width: 992px) {
  /* Matched through its container so this outweighs the controls stylesheet's
     own .dps-controls .dps-bell rule. */
  .dps-controls .dps-floating-bell { display: none; }
}


/* ===========================================================================
   Build and reserve. The configurator page, in the storefront's own palette.
   =========================================================================== */

.cfg-page { max-width: 1180px; margin: 0 auto; padding: 40px 20px 80px; }
.cfg-head { max-width: 62ch; margin-bottom: 40px; }
.cfg-eyebrow {
    margin: 0 0 10px; font: 400 11px/1 Arial, sans-serif; letter-spacing: .2em;
    text-transform: uppercase; color: #c3002f;
}
.cfg-title { margin: 0 0 14px; font: 700 clamp(26px, 3.6vw, 40px)/1.1 Arial, sans-serif; color: #111111; }
.cfg-lede { margin: 0; font: 400 16px/1.6 Arial, sans-serif; color: #6e7275; }

.cfg-step { margin-bottom: 42px; }
.cfg-steph {
    display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
    font: 700 15px/1 Arial, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; color: #111111;
}
.cfg-steph span {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #c3002f; color: #ffffff; font-size: 13px; letter-spacing: 0;
}

.cfg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-chip {
    padding: 11px 20px; border: 1px solid #cfcfcf; background: #ffffff;
    font: 600 14px/1 Arial, sans-serif; letter-spacing: .06em; color: #111111;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.cfg-chip:hover { border-color: #111111; }
.cfg-chip.is-on { background: #111111; border-color: #111111; color: #ffffff; }
.cfg-chip:focus-visible, .cfg-trim:focus-visible, .cfg-go:focus-visible {
    outline: 2px solid #c3002f; outline-offset: 2px;
}

.cfg-empty { margin: 0; font: 400 15px/1.6 Arial, sans-serif; color: #8b8f92; }
.cfg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.cfg-trim {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    padding: 0 0 18px; border: 1px solid #e3e3e3; background: #ffffff;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
    font-family: Arial, sans-serif;
}
.cfg-trim:hover { border-color: #111111; }
.cfg-trim.is-on { border-color: #c3002f; box-shadow: inset 0 0 0 1px #c3002f; }
.cfg-shot { display: block; width: 100%; height: auto; margin-bottom: 10px; background: #f4f4f4; }
.cfg-noshot {
    display: flex; align-items: center; justify-content: center; min-height: 118px;
    padding: 10px; font: 400 12px/1.5 Arial, sans-serif; color: #8b8f92; text-align: center;
}
.cfg-name { padding: 0 16px; font: 700 17px/1.25 Arial, sans-serif; color: #111111; }
.cfg-version { padding: 0 16px; font: 400 13px/1.4 Arial, sans-serif; color: #6e7275; }
.cfg-price { padding: 2px 16px 0; font: 700 16px/1.3 Arial, sans-serif; color: #c3002f; }
.cfg-figures { padding: 0 16px; font: 400 12.5px/1.4 Arial, sans-serif; color: #6e7275; }
.cfg-specs {
    margin: 8px 0 0; padding: 0 16px 0 32px;
    font: 400 13px/1.65 Arial, sans-serif; color: #6e7275;
}
.cfg-pick {
    margin-top: 12px; padding: 0 16px; font: 700 12px/1 Arial, sans-serif;
    letter-spacing: .12em; text-transform: uppercase; color: #111111;
}
.cfg-trim.is-on .cfg-pick { color: #c3002f; }

.cfg-summary { border-top: 1px solid #e3e3e3; padding-top: 32px; }
.cfg-built { margin-bottom: 20px; }
.cfg-built-model { margin: 0 0 6px; font: 700 22px/1.25 Arial, sans-serif; color: #111111; }
.cfg-built-price { margin: 0; font: 700 26px/1.2 Arial, sans-serif; color: #c3002f; }
.cfg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cfg-go {
    padding: 15px 34px; border: 0; background: #c3002f; color: #ffffff;
    font: 700 14px/1 Arial, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer;
}
.cfg-go:hover { background: #a30027; }
.cfg-alt {
    font: 700 13px/1 Arial, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: #111111; text-underline-offset: 4px;
}

.cfg-form { margin-top: 28px; max-width: 720px; }
.cfg-formlede { margin: 0 0 18px; font: 400 14px/1.6 Arial, sans-serif; color: #6e7275; }
.cfg-fields {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-bottom: 18px;
}
.cfg-form label {
    display: flex; flex-direction: column; gap: 6px;
    font: 600 12px/1 Arial, sans-serif; letter-spacing: .1em;
    text-transform: uppercase; color: #6e7275;
}
.cfg-form input[type="text"], .cfg-form input[type="tel"],
.cfg-form input[type="email"], .cfg-form select {
    padding: 12px 12px; border: 1px solid #cfcfcf; background: #ffffff;
    font: 400 15px/1.3 Arial, sans-serif; color: #111111; border-radius: 0;
}
.cfg-form input.is-missing, .cfg-form select.is-missing { border-color: #c3002f; }
.cfg-consent {
    flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 22px;
    font: 400 13.5px/1.5 Arial, sans-serif; letter-spacing: 0;
    text-transform: none; color: #6e7275;
}
.cfg-consent input { margin-top: 2px; }

.cfg-done { margin-top: 28px; padding: 24px; background: #f4f4f4; max-width: 720px; }
.cfg-done-head { margin: 0 0 8px; font: 700 20px/1.25 Arial, sans-serif; color: #111111; }
.cfg-done p { margin: 0; font: 400 15px/1.65 Arial, sans-serif; color: #6e7275; }

@media (max-width: 640px) {
    .cfg-page { padding: 28px 16px 64px; }
    .cfg-actions { flex-direction: column; align-items: stretch; }
    .cfg-go { width: 100%; }
    .cfg-alt { text-align: center; }
}

/* ===========================================================================
   My Showroom, Compare, Find your Nissan. Same furniture as the configurator,
   so the three read as one part of the site rather than three bolt ons.
   =========================================================================== */

.sr-page { max-width: 1180px; margin: 0 auto; padding: 40px 20px 80px; }
.sr-head { max-width: 62ch; margin-bottom: 38px; }
.sr-eyebrow {
    margin: 0 0 10px; font: 400 11px/1 Arial, sans-serif; letter-spacing: .2em;
    text-transform: uppercase; color: #c3002f;
}
.sr-title { margin: 0 0 14px; font: 700 clamp(26px, 3.6vw, 40px)/1.1 Arial, sans-serif; color: #111111; }
.sr-lede { margin: 0; font: 400 16px/1.6 Arial, sans-serif; color: #6e7275; }

.sr-step, .sr-block { margin-bottom: 36px; }
.sr-h {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
    font: 700 15px/1 Arial, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; color: #111111;
}
.sr-h span {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #c3002f; color: #ffffff; font-size: 13px; letter-spacing: 0;
}

.sr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-chip {
    padding: 11px 20px; border: 1px solid #cfcfcf; background: #ffffff;
    font: 600 14px/1 Arial, sans-serif; letter-spacing: .04em; color: #111111;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.sr-chip:hover { border-color: #111111; }
.sr-chip.is-on { background: #111111; border-color: #111111; color: #ffffff; }
.sr-chip:focus-visible { outline: 2px solid #c3002f; outline-offset: 2px; }

.sr-grid, .sr-cols {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.sr-cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sr-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 0 0 16px; border: 1px solid #e3e3e3; background: #ffffff;
    text-decoration: none; transition: border-color .15s;
}
.sr-card:hover { border-color: #111111; }
.sr-shot { display: block; width: 100%; height: auto; margin-bottom: 8px; background: #f4f4f4; }
.sr-name { padding: 0 14px; font: 700 16px/1.25 Arial, sans-serif; color: #111111; }
.sr-price { padding: 0 14px; font: 700 14px/1.3 Arial, sans-serif; color: #c3002f; }
.sr-price.sr-quiet { color: #8b8f92; font-weight: 400; }
.sr-cat { padding: 0 14px; font: 400 12.5px/1.4 Arial, sans-serif; color: #6e7275; }
.sr-why { padding: 2px 14px 0; font: italic 400 13px/1.45 Arial, sans-serif; color: #c3002f; }
.sr-note { margin: 0 0 16px; font: 400 14px/1.6 Arial, sans-serif; color: #6e7275; max-width: 64ch; }

.sr-empty, .sr-count {
    margin: 0; font: 400 15px/1.6 Arial, sans-serif; color: #6e7275; max-width: 64ch;
}
.sr-count { margin-bottom: 16px; color: #111111; font-weight: 700; }

.sr-who { padding: 18px 20px; background: #f4f4f4; margin-bottom: 34px; }
.sr-wholine { margin: 0 0 5px; font: 400 16px/1.5 Arial, sans-serif; color: #111111; }
.sr-whonote { margin: 0; font: 400 13.5px/1.5 Arial, sans-serif; color: #6e7275; }

.sr-build { padding: 20px; border: 1px solid #c3002f; }
.sr-buildname { margin: 0 0 4px; font: 700 20px/1.25 Arial, sans-serif; color: #111111; }
.sr-buildprice { margin: 0 0 16px; font: 700 22px/1.2 Arial, sans-serif; color: #c3002f; }

.sr-tablewrap { overflow-x: auto; margin-top: 22px; }
.sr-table { width: 100%; border-collapse: collapse; }
.sr-table th, .sr-table td {
    padding: 12px 14px; border-bottom: 1px solid #e3e3e3; text-align: left;
    font: 400 14.5px/1.4 Arial, sans-serif; color: #111111;
}
.sr-table th {
    font-weight: 700; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: #6e7275; white-space: nowrap;
}

.sr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.sr-go {
    display: inline-block; padding: 15px 30px; background: #c3002f; color: #ffffff;
    font: 700 13px/1 Arial, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; text-decoration: none;
}
.sr-go:hover { background: #a30027; }
.sr-alt {
    font: 700 13px/1 Arial, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: #111111; text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .sr-page { padding: 28px 16px 64px; }
    .sr-actions { flex-direction: column; align-items: stretch; }
    .sr-go, .sr-alt { text-align: center; }
}
.sr-aside {
    margin: 22px 0 0; padding: 14px 16px; background: #f4f4f4;
    font: 400 14px/1.6 Arial, sans-serif; color: #6e7275; max-width: 68ch;
}
.sr-aside a { color: #c3002f; }

/* The demo's own pages, at the top of whichever menu the visitor opened. The
   captured menu is Nissan's and lists Nissan's site; five of these pages have
   no equivalent there, and on a phone the menu is the only navigation, so
   without this block My Showroom and the configurator could not be reached at
   all. */
.dps-shortcuts {
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid #e0e0e0;
}
.dps-shortcuts h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6e7275;
}
.dps-shortcuts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dps-shortcuts li { margin: 0; }
.dps-shortcuts a {
  display: block;
  padding: 11px 14px;
  min-height: 44px;
  line-height: 22px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  color: #111111;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.dps-shortcuts a:hover,
.dps-shortcuts a:focus-visible { border-color: #111111; }
/* Inside the laptop menu the panel is wide, so the same list reads as columns
   rather than as a wrapped row of chips. */
.meganav-container .dps-shortcuts { padding: 20px 24px 18px; margin-bottom: 0; }
.dps-shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dps-shortcuts-head h2 { margin: 0; }
.dps-shortcuts-close {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dps-shortcuts-close:hover { border-color: #111111; }
/* The captured search box carries 50px of top padding for a drawer that had
   nothing above it. It has something above it now. */
header.c_010D.dps-menu-open aside.sidebar-mobile form.search { padding-top: 6px; }

/* AN INVISIBLE BAR THAT ATE EVERY TAP ON SIX MODEL PAGES.
   The captured sticky nav is position fixed, full width, up to 100px tall and
   z-index 10000, and its ns-no-display state hides only the inner element. The
   container stayed exactly where it was: an invisible rectangle across the top
   of the page, above the header, swallowing every press on the hamburger, the
   logo and the search box. It never shows anything in this build, because the
   script that would reveal it is not part of the capture, so in that state it
   collapses and stops taking presses. Found on 2 September by the first check
   that used a real tap rather than a scripted click; a scripted click goes
   straight to the element and never hit tests, which is why every audit before
   it passed. */
.ns-sticky-nav.ns-no-display {
  pointer-events: none;
  max-height: 0;
}
.ns-sticky-nav.ns-no-display .ns-sticky-nav-inner { pointer-events: none; }

/* THE KICKS MICROSITE, READ TOP TO BOTTOM.

   The capture froze the microsite's scroll animations part way through, and
   nothing on this copy runs the library that would move them on. Measured on
   20 October at 1440, 1280 and 390 pixels wide, that left three faults:

     the blurred transition layer pinned, fixed over the window at every
     depth, so the specification, the price, the configurator link, the
     accessories and three inline cards were all underneath it
     every pinned block's scroll allowance written out as padding, several
     screens of blank page between the sections
     the two sideways galleries stopped on their first slide, the rest
     clipped off the right edge with no way to reach them
     the drive modes panel parked a screen below its section at opacity 0
     two photographs frozen blurred
     at phone width, every pinned block at its desktop height and the drive
     panel at its desktop padding

   So every pin is released into the flow where it stands, the hero takes the
   screen it covers, and each gallery scrolls sideways under the reader's own
   hand. The page reads as the sections it is made of. */
body[data-product-id="kicks"] .hero-wrapper { position: relative; height: 100vh; }
body[data-product-id="kicks"] .TransitionVisual { height: auto; }
body[data-product-id="kicks"] .pin-spacer {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  inset: auto !important;
}
/* Opacity too: the drive modes panel, three modes with their economy,
   horsepower and torque and a test drive button, was frozen at 0. */
body[data-product-id="kicks"] .pin-spacer > * {
  position: relative !important;
  inset: auto !important;
  max-width: 100% !important;
  transform: none !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
}
/* A pinned wrapper kept the height it had while pinned, one screen, over
   content two screens tall, so the drive modes panel after it started on top
   of the Discover an epic drive headline. */
body[data-product-id="kicks"] .kicksDriveFullWrapper {
  height: auto !important;
  max-height: none !important;
}
/* Two photographs stopped mid effect: the car on the road at the end of its
   blur out, a screen of grey, and the car under Kick back and relax at the
   start of its reveal, small and blurred. The backdrop behind the opening
   headline is meant to be blurred and is a block, not a photograph, so it
   keeps its filter. */
body[data-product-id="kicks"] img[style*="filter"] {
  filter: none !important;
  transform: none !important;
}
/* Its headline is white and was read against that grey; with the photograph
   restored it stands on a ground of its own. */
body[data-product-id="kicks"] .transVisualInnerDrive { background: #14181a; padding-block: 96px; }
/* At phone width the panel kept the side padding it was given at 1440, 216
   pixels each side of a 390 pixel screen, and its text had no width at all.
   The hero's buttons step clear of the demo's floating controls, which sat
   on Reserve now. */
@media (max-width: 760px) {
  body[data-product-id="kicks"] .transVisualInnerDrive {
    width: 100% !important;
    padding: 64px 20px !important;
    box-sizing: border-box;
  }
  body[data-product-id="kicks"] .heroIntro .heroCtaWrapper { padding-inline-end: 64px; }
  /* The road photograph is held in a frame three screens tall, for an
     effect whose text no longer arrives, so it read as three screens of
     the same picture. */
  body[data-product-id="kicks"] .pictureHolder { height: auto !important; min-height: 0 !important; }
}
body[data-product-id="kicks"] .TransitionVisual_blur {
  width: 100% !important;
  height: 100vh !important;
  max-height: none !important;
  overflow: hidden;
}
body[data-product-id="kicks"] .LateralScroll_sectionBox_media {
  max-width: 100% !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
body[data-product-id="kicks"] .LateralScroll_sectionBox_media > * { scroll-snap-align: start; }

/* BESIDE THE FORM. The chosen car, its published price where there is one,
   and what happens next, drawn by js/creatives.js on the form pages. Above
   the fields on a narrower screen; in the margin beside the form's column on
   a wide one, held in view while the visitor fills the form in. It covers
   nothing at any width. */
.dps-form-column { position: relative; }
.dps-form-aside { margin: 0 0 24px; }
.dps-form-aside-card { border: 1px solid #e3e5e7; border-left: 3px solid #c3002f; border-radius: 4px;
  background: #fff; padding: 18px 20px; font-size: 14px; line-height: 1.5; color: #14181a; text-align: left; }
.dps-form-aside-kicker { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #c3002f; margin: 0 0 8px; }
.dps-form-aside-shot { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 0 8px; }
.dps-form-aside-name { font-weight: 700; font-size: 16px; margin: 0 0 2px; }
.dps-form-aside-price, .dps-form-aside-none { margin: 0 0 16px; color: #55595c; }
.dps-form-aside-steps { margin: 0; padding-left: 20px; list-style: decimal outside; }
.dps-form-aside-steps li { display: list-item; margin: 0 0 6px; color: #55595c; list-style: inherit; }
#dps-lc-nudge .dps-lc-inline { margin: 14px 0 0; }
@media (min-width: 1400px) {
  .dps-form-aside:not(.dps-form-aside-static) { position: absolute; top: 0; bottom: 0; left: calc(100% + 40px);
    width: 300px; margin: 0; }
  .dps-form-aside:not(.dps-form-aside-static) .dps-form-aside-card { position: sticky; top: 110px; }
}
@media (max-width: 1399px) {
  .dps-form-aside-shot { float: left; width: 140px; margin: 0 16px 8px 0; }
  .dps-form-aside-steps { clear: both; }
}

/* The shortlist bar names each model as a link back to its page. */
.dps-lc-shortlist span a { color: inherit; text-decoration: underline; }