/* Fleet grids: cards below the fold skip style, layout and paint until they
   near the viewport, so their photos (~300KB each) are not fetched or decoded
   on load. "auto" keeps each card's real size once it has rendered. */
/* (content-visibility: auto removed 2026-10-30: it deferred drawing each card until
   it scrolled near, so photos popped in, and on phones the guessed 320px height
   made cards overlap and the photo area collapse) */
/* NEXX shared mobile optimisation layer.
   The site is authored with inline styles, so these overrides target inline
   style substrings and use !important. Loaded last on every page.

   BREAKPOINTS: the main layer is max-width: 1024px, so tablet (tv) inherits
   every mobile (mv) fix automatically - any new mv rule goes in a 1024px
   block and tablet gets it for free. Phone-only refinements (tighter type,
   3-up chips, etc.) live in the 640 / 600 / 560 blocks. */

@media (max-width: 1024px) {
  /* the desktop one-liner has to wrap again once the viewport is narrow */
  p[data-r="fleetintro"][style] { white-space: normal !important; max-width: 46ch !important; }
}

@media (max-width: 1024px) {
  div[data-r="promobox"][style] { border-radius: 22px !important; padding: 18px 16px 14px !important; }
}

@media (max-width: 1024px) {
  h3[data-r="promotitle"][style] { font-size: 17px !important; line-height: 1.2 !important; margin-bottom: 12px !important; }
}

/* ===== Promo packages: one slideable row at every width =====
   Seven cards never fit as a grid, so the row scrolls horizontally on desktop
   and device alike. Desktop keeps a visible scrollbar so the overflow is
   discoverable with a mouse. */
/* 260px to match the flash-sale cards, which fits exactly four in the box */
div[data-r="promocards"] > a {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
@media (min-width: 1025px) {
  div[data-r="promocards"] { scrollbar-width: thin; scrollbar-color: rgba(17,19,22,0.28) transparent; }
  div[data-r="promocards"]::-webkit-scrollbar { height: 8px; }
  div[data-r="promocards"]::-webkit-scrollbar-track { background: rgba(17,19,22,0.06); border-radius: 100px; }
  div[data-r="promocards"]::-webkit-scrollbar-thumb { background: rgba(17,19,22,0.28); border-radius: 100px; }
  div[data-r="promocards"]::-webkit-scrollbar-thumb:hover { background: rgba(17,19,22,0.45); }
}

@media (max-width: 1024px) {
  div[data-r="revhead"][style] { margin-bottom: 18px !important; }
  div[data-r="revhead"] h2[style] { font-size: 27px !important; line-height: 1.1 !important; }
  /* the about-us version is full-bleed with its own side padding and carries a
     rating block: match the 20px gutter the sections above use, and pin the
     rating to the right of the heading rather than letting it drop below */
  div[data-r="revhead"][style] { padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; flex-wrap: nowrap !important; align-items: flex-end !important; }
  div[data-r="revhead"] > div:first-child { min-width: 0; }
  div[data-r="revhead"] > div:first-child > div[style] { font-size: 11.5px !important; margin-bottom: 9px !important; }
  div[data-r="revhead"] > div:last-child[style] { gap: 1px !important; flex-direction: column !important; align-items: flex-end !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; margin-left: auto !important; }
  div[data-r="revhead"] > div:last-child > span[style] { font-size: 23px !important; line-height: 1.05 !important; }
  div[data-r="revhead"] > div:last-child > div { text-align: right !important; }
  div[data-r="revhead"] > div:last-child div[style] { font-size: 11px !important; white-space: nowrap !important; }
}
@media (max-width: 560px) {
  div[data-r="revhead"][style] { padding-left: 18px !important; padding-right: 18px !important; }
  div[data-r="revhead"] h2[style] { font-size: 23px !important; }
}

/* seasonal card pills: one row always, scrolling rather than wrapping (a second
   line makes that card taller and stretches every card in the grid row) */
div[data-r="sntags"] { flex-wrap: nowrap !important; max-width: none; }
div[data-r="sntags"]::-webkit-scrollbar { display: none; }
div[data-r="sntags"] > span { flex: 0 0 auto; max-width: none; }

/* The specs grid stretches both cards to equal height, leaving a void under
   whichever list is shorter. The fix lives in the pages' own inline style
   (align-items: start) because an inline declaration beats this file; this rule
   is a belt-and-braces backstop for any page that still says stretch. */
div[data-r="specs"][style] { align-items: start !important; }

@media (max-width: 560px) {
  div[data-r="safetygrid"][style],
  div[data-r="featgrid"][style] { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  /* one swipeable row on device: two stacked columns of this text ate too much
     of the hero, and wrapping made it four tall lines */
  div[data-r="heroincl"][style] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    /* starts flush with the title above, but bleeds right so the row can scroll
       to the screen edge instead of stopping short */
    margin-left: 0;
    margin-right: -16px;
    padding: 0 16px 0 0;
  }
  div[data-r="heroincl"]::-webkit-scrollbar { display: none; }
  /* each item reads as a pill, so a clipped one looks swipeable rather than cut */
  div[data-r="heroincl"] > span[style] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap !important;
    max-width: none;
    font-size: 12.5px !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    padding: 7px 13px 7px 8px;
  }
  div[data-r="heroincl"] > span > span[style] { width: 17px !important; height: 17px !important; font-size: 9.5px !important; }
  div[data-r="heroincl"] > span > span[style] { width: 18px !important; height: 18px !important; font-size: 10px !important; }
}

@media (max-width: 640px) {
  div[data-r="heroincl"] > span[style] { font-size: 12px !important; padding: 6px 12px 6px 7px; }
}

@media (max-width: 1024px) {
  /* single column on device, so the copy sits over the whole card: keep the
     scrim strong enough for white text and let the photo read at the bottom */
  div[data-r="pcta"][style] {
    background-image: linear-gradient(180deg, rgba(10,86,79,0.93) 0%, rgba(10,86,79,0.80) 46%, rgba(12,20,19,0.42) 100%), url('uploads/car-rental-discounts.jpg') !important;
    background-position: center, center 32% !important;
  }
}

@media (max-width: 1024px) {
  /* overflow-x: auto clips vertically too, so the row needs room for the 4px
     hover lift above and the 14px-deep hover shadow below */
  div[data-r="flashrow"][style] {
    scrollbar-width: none !important;
    padding-top: 12px !important;
    padding-bottom: 22px !important;
    margin-top: -12px !important;
    margin-bottom: -18px !important;
  }
  div[data-r="flashrow"]::-webkit-scrollbar { display: none; }
}

@media (max-width: 1024px) {
  /* overflow-x: auto clips vertically too, so the row needs room for the 4px
     hover lift above and its shadow below */
  div[data-r="pkgrid"][style] {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
    margin-top: -12px !important;
    margin-bottom: -16px !important;
  }
}

@media (max-width: 1024px) {
  /* the flash-stack pill sits beside the discount figure in a narrow card, so
     it shrinks rather than pushing the row wider */
  span[data-r="flashstack"][style] { font-size: 9px !important; padding: 3px 7px !important; letter-spacing: -0.01em; }
}

/* ===== Booking calendar: hover state on selectable dates =====
   Skips disabled days (past dates, and pre-pickup days when choosing a return)
   and the already-picked days, whose dark fill must not be overridden. */
button[data-r="calday"]:not(:disabled):not([data-sel="1"]):hover {
  background: rgba(78, 206, 196, 0.22) !important;
  border-color: rgba(78, 206, 196, 0.6) !important;
}

@media (max-width: 1024px) {
  /* title sits beside the icon, description drops below both: the card becomes
     a 2-col grid so the text does not squeeze into a narrow column */
  div[data-r="insfleet"][style] {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    padding: 16px 16px 18px !important;
  }
  div[data-r="insfleet"] > div:first-child[style] { width: 38px !important; height: 38px !important; }
  div[data-r="insfleet"] > div:first-child img { width: 26px !important; height: 26px !important; }
  div[data-r="insfleet"] > div:last-child { display: contents; }
  h3[data-r="insfleet-t"][style] { font-size: 15.5px !important; margin-bottom: 0 !important; }
  p[data-r="insfleet-b"][style] { grid-column: 1 / -1; font-size: 13px !important; }
}

@media (max-width: 1024px) {
  /* the 88px lead column leaves the body text in a sliver on a phone, so each
     row stacks: lead as a compact label, description full width beneath */
  div[data-r="tcadv"][style] { gap: 12px !important; }
  div[data-r="tcadvrow"][style] {
    display: block !important;
    padding-left: 12px;
    border-left: 2px solid #e4f4f2;
  }
  span[data-r="tcadvlead"][style] { display: block !important; min-width: 0 !important; font-size: 15px !important; margin-bottom: 3px; }
  span[data-r="tcadvbody"][style] { display: block !important; font-size: 13px !important; line-height: 1.5 !important; }
  p[data-r="tcadvnote"][style] { font-size: 12.5px !important; margin-top: 14px !important; }
}

@media (max-width: 1024px) {
  /* the tick keeps its own column so the wrapped text stays aligned under the
     bold lead rather than running back under the glyph */
  div[data-r="tcvis"][style] { padding: 18px 16px !important; gap: 14px !important; }
  div[data-r="tcvisrow"][style] {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  span[data-r="tcvisicon"][style] { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
  span[data-r="tcvisicon"] img { width: 19px !important; height: 19px !important; }
  /* the Touch 'n Go rows use unboxed illustrated icons rather than the visitors
     card's bordered chips, so they keep a larger glyph */
  #tng div[data-r="tcvis"][style] { padding: 18px 16px !important; }
  #tng div[data-r="tcvisrow"][style] { grid-template-columns: 32px minmax(0, 1fr) !important; }
  #tng span[data-r="tcvisicon"][style] { width: 32px !important; height: 32px !important; border-radius: 0 !important; }
  #tng span[data-r="tcvisicon"] img { width: 30px !important; height: 30px !important; }
  div[data-r="tcvisrow"] strong { display: block; margin-bottom: 2px; }
}

@media (max-width: 1024px) {
  /* one card per row: two columns leave each item a sliver of text beside a
     38px icon. The icon keeps its own grid track so wrapped lines stay aligned. */
  #user div[data-r="tcduo"][style] { grid-template-columns: 1fr !important; gap: 8px !important; }
  div[data-r="tcwrow"][style] {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 13px 14px !important;
  }
  span[data-r="tcwicon"][style] { width: 32px !important; height: 32px !important; background-size: 30px 30px !important; }
  span[data-r="tcwtext"][style] { font-size: 13px !important; }
  p[data-r="tcwnote"][style] { font-size: 12.5px !important; margin-top: 14px !important; }
}


@media (max-width: 1024px) {
  /* the icon keeps its own grid track so wrapped description lines stay aligned
     under the bold title rather than running back beneath the glyph */
  div[data-r="ctapanel"][style] { padding: 18px 16px !important; border-radius: 14px !important; }
  div[data-r="ctapanelh"][style] { font-size: 11px !important; margin-bottom: 14px !important; }
  div[data-r="ctarow"][style] {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  span[data-r="ctaicon"][style] { width: 30px !important; height: 30px !important; background-size: 28px 28px !important; }
  div[data-r="ctarow"] > div > div:first-child { font-size: 13.5px !important; }
  div[data-r="ctarow"] > div > div:last-child { font-size: 12.5px !important; }
}

@media (max-width: 1024px) {
  /* the footer link columns collapse into accordions (wired in nav.js), so they
     stack as full-width rows with a rule between them */
  div[data-r="footcols"][style] { grid-template-columns: 1fr !important; gap: 0 !important; padding-bottom: 6px !important; }
  div[data-r="footcols"] > div:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,0.1);
    /* no vertical padding here: it would be dead space outside the label, which
       is the role="button". The label carries the row height instead. */
    padding: 0;
  }
  div[data-r="footcols"] > div:not(:first-child) > div:first-child[style] {
    min-height: 48px !important;
    margin-bottom: 0 !important;
  }
  div[data-r="footcols"] > div[data-nx-open="1"] > div:first-child[style] { margin-bottom: 12px !important; }
  /* the caret flips by glyph, not transform: a matching rotate rule computed to
     identity on this node, the same way the inline display did */
  div[data-r="footcols"] [data-nx-chev] { font-size: 13px !important; }
  div[data-r="footcols"] > div:first-child { padding-bottom: 20px; }
  /* an expanded column lists its links two-up rather than one tall stack, with
     a 44px tap target per link */
  div[data-r="footcols"] > div:not(:first-child) > div:nth-child(2)[style] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 14px !important;
  }
  /* collapsed state, set by nav.js on the column (see apply()) */
  /* Collapsed is the DEFAULT, not something nav.js has to switch on. The page
     runtime re-renders the footer after first paint, which drops the attribute;
     until nav.js put it back (60ms+), every column sprang open and the page grew
     ~590px, then shrank again. A visitor who had already scrolled was clamped
     to the bottom by the shrink: the "jumps to the footer" bug, on every page.
     Only an explicitly opened column (data-nx-open="1") shows its links. */
  div[data-r="footcols"] > div:not(:first-child):not([data-nx-open="1"]) > div:nth-child(2)[style] { display: none !important; }
  div[data-r="footcols"] > div[data-nx-open="1"] { padding-bottom: 20px; }
  div[data-r="footcols"] > div:not(:first-child) > div:nth-child(2) > a[style] {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    font-size: 14px !important;
  }
}

@media (max-width: 1024px) {
  /* the tick keeps its own grid track so a wrapped second line stays aligned
     with the text above it rather than running back under the glyph */
  div[data-r="pctalist"][style] { gap: 10px !important; }
  div[data-r="pctarow"][style] {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    gap: 9px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 1024px) {
  /* justified so both edges line up like a block of type; text-wrap: pretty
     fights justification, so it has to go */
  p[data-r="abintro"][style] { text-align: justify !important; text-wrap: auto !important; hyphens: auto; }
}

@media (max-width: 1024px) {
  /* a 64px/56px inset and a 38px quote make this box tower on a phone */
  div[data-r="valbox"][style] { padding: 28px 20px !important; border-radius: 20px !important; }
  div[data-r="valeyebrow"][style] { margin-bottom: 12px !important; font-size: 11.5px !important; }
  p[data-r="valquote"][style] { font-size: 19px !important; line-height: 1.3 !important; }
  /* one auto-playing row inside the quote box: the pills are rendered twice and
     the track travels exactly one copy's width, so the loop point is invisible */
  div[data-r="valmarquee"][style] { overflow: hidden; margin-top: 16px !important; }
  div[data-r="valtrack"][style] {
    flex-wrap: nowrap !important;
    width: max-content;
    max-width: none;
    padding-right: 10px;
    animation: nxValMarquee 22s linear infinite;
    will-change: transform;
  }
  div[data-r="valtrack"] > span[style] { flex: 0 0 auto; font-size: 12.5px !important; padding: 8px 14px !important; }
}
@keyframes nxValMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  div[data-r="valtrack"][style] { animation: none; }
  div[data-r="valmarquee"][style] { overflow-x: auto; }
}

@media (max-width: 1024px) {
  /* the box kept its desktop 64/56 padding and 33px quote, which made it far
     taller than it needs to be on a narrow screen */
  div[data-r="valbox"][style] { padding: 26px 20px !important; border-radius: 18px !important; }
  div[data-r="valeyebrow"][style] { font-size: 11px !important; margin-bottom: 12px !important; }
  div[data-r="valquote"][style],
  p[data-r="valquote"][style] { font-size: 22px !important; line-height: 1.22 !important; }
}
@media (max-width: 560px) {
  div[data-r="valbox"][style] { padding: 22px 16px !important; }
  p[data-r="valquote"][style] { font-size: 19px !important; }
}

/* ===== About: services row as a full-bleed auto-playing marquee =====
   Same mechanism as the reviews row: the list renders twice and the track
   travels exactly one copy's width, so the loop point is invisible. */
@keyframes nxSvcMarquee {
  /* left to right: start one copy back and travel forward, so the reset lands
     on an identical frame */
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
div[data-r="svcgrid"][style] {
  animation: nxSvcMarquee 80s linear infinite;
  will-change: transform;
  max-width: none;
  /* a doubled N-card track has 2N cards but only 2N-1 gaps, so the trailing gap
     squares the box up to a whole repeat period */
  padding-right: 18px;
}
div[data-r="svcgrid"] > div { flex: 0 0 340px; }
@media (max-width: 1024px) {
  div[data-r="svcgrid"][style] { animation-duration: 56s; gap: 12px !important; padding-right: 12px; }
  div[data-r="svcgrid"] > div { flex-basis: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  div[data-r="svcgrid"][style] { animation: none; }
  div[data-r="svcmarquee"] { overflow-x: auto; }
}

@media (max-width: 1024px) {
  div[data-r="flashdel"][style] { margin-top: 14px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  div[data-r="flashdel"] > span:first-child[style] { width: 22px !important; height: 22px !important; }
  div[data-r="flashdel"] > span:last-child[style] { font-size: 12.5px !important; }
}

@media (max-width: 1024px) {
  /* the reset group sits in the device chip row, so it must not stretch */
  div[data-r2="resetgrp"][style] { flex: 0 0 auto !important; }
  button[data-r="fltreset"][style] { min-height: 38px !important; font-size: 12.5px !important; padding: 0 13px !important; }
}

@media (max-width: 1024px) {
  /* the two partner columns stack rather than squeezing side by side */
  div[data-r="ppair"][style] { grid-template-columns: 1fr !important; gap: 34px !important; }
}

@media (max-width: 1024px) {
  /* square cards get very small once the pair column halves, so they revert to
     natural height side by side */
  div[data-r="psplit"][style] { gap: 10px !important; }
  div[data-r="psplit"] > div[style] { aspect-ratio: auto !important; padding: 18px 16px !important; }
  div[data-r="psplit"] h3[style] { font-size: 17px !important; }
  div[data-r="psplit"] [style*="font-size:40px"] { font-size: 30px !important; }
  div[data-r="psplit"] p[style] { font-size: 13px !important; }
}

/* ===== Partners: requirement accordions ===== */
details[data-r="pacc"] > summary::-webkit-details-marker { display: none; }
details[data-r="pacc"] > summary::marker { content: ""; }
details[data-r="pacc"][open] > summary [data-r="paccchev"] { transform: rotate(180deg); }
details[data-r="pacc"] > summary [data-r="paccchev"] { display: inline-block; transition: transform .2s ease; }

/* ===== Card hover lift: shallow enough never to clip =====
   Cards were authored to rise 6 to 10px. Inside a scroll row (overflow-x: auto
   clips vertically too) that lift gets sliced off at the top, and elsewhere it
   reads as floating too far. One shallow value everywhere. Needs !important
   because the DC runtime applies style-hover as an INLINE style on hover, so
   the attribute itself is gone from the DOM and cannot be matched. The inline
   `transition: transform ...` that every lifting card carries is the hook; the
   contact rows list `background` first, so their sideways nudge is untouched. */
a[style*="transition: transform"]:hover,
div[style*="transition: transform"]:hover,
div[data-r="promocards"] > a:hover,
div[data-r="pkgrid"] > div:hover,
div[data-r="blogcards"] > a:hover,
div[data-r="fleetgrid"] > a:hover,
div[data-r="clsgrid"] > a:hover,
div[data-r="sngrid"] > div:hover,
div[data-r="classgrid"] a:hover,
div[data-flash-slider] > a:hover,
div[data-ev-slider] > a:hover {
  transform: translateY(-4px) !important;
}

/* ===== Card hover shadow: one tight value site-wide =====
   Cards were authored with deep hover shadows (0 24px 50px and similar). In a
   horizontally scrolling row the overflow clips them into a hard straight line,
   and elsewhere they force extra padding to avoid the same cut. Capping the
   hover shadow to a short, tight spread fixes both at the source. Applies at
   every width, and needs !important because style-hover writes inline. */
a[style*="border-radius"]:hover,
div[style*="border-radius"][style*="transition"]:hover {
  box-shadow: 0 6px 16px -8px rgba(17, 19, 22, 0.28) !important;
}

/* Same cap for the RESTING shadow of cards inside a horizontal scroll row: the
   row's overflow-y clips anything deeper into a hard straight line. These three
   rows carry inline overflow-x: auto, so they scroll at EVERY width. */
div[data-flash-slider] > a,
div[data-ev-slider] > a,
div[data-r="promocards"] > a {
  box-shadow: 0 6px 16px -8px rgba(17, 19, 22, 0.28) !important;
}

@media (max-width: 1024px) {
  /* sngrid and clsbrowse only become scrollers on device - above 1024px they are
     plain grids with no overflow, so their authored deep shadow must stand */
  div[data-r="sngrid"] > div,
  div[data-r="sngrid"] > a,
  div[data-r="clsbrowse"] > a {
    box-shadow: 0 6px 16px -8px rgba(17, 19, 22, 0.28) !important;
  }
}

@media (max-width: 1024px) {
  h1 { letter-spacing: -0.02em !important; line-height: 1.05 !important; }
  h2 { line-height: 1.12 !important; }
  [style*="font-size: 34px"], [style*="font-size:34px"] { font-size: 31px !important; }
  [style*="font-size: 35px"], [style*="font-size:35px"] { font-size: 32px !important; }
  [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 32px !important; }
  [style*="font-size: 37px"], [style*="font-size:37px"] { font-size: 33px !important; }
  [style*="font-size: 38px"], [style*="font-size:38px"] { font-size: 33px !important; }
  [style*="font-size: 39px"], [style*="font-size:39px"] { font-size: 34px !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 34px !important; }
  [style*="font-size: 41px"], [style*="font-size:41px"] { font-size: 35px !important; }
  [style*="font-size: 42px"], [style*="font-size:42px"] { font-size: 36px !important; }
  [style*="font-size: 43px"], [style*="font-size:43px"] { font-size: 36px !important; }
  [style*="font-size: 44px"], [style*="font-size:44px"] { font-size: 37px !important; }
  [style*="font-size: 45px"], [style*="font-size:45px"] { font-size: 37px !important; }
  [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 38px !important; }
  [style*="font-size: 47px"], [style*="font-size:47px"] { font-size: 38px !important; }
  [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 39px !important; }
  [style*="font-size: 49px"], [style*="font-size:49px"] { font-size: 39px !important; }
  [style*="font-size: 50px"], [style*="font-size:50px"] { font-size: 40px !important; }
  [style*="font-size: 51px"], [style*="font-size:51px"] { font-size: 40px !important; }
  [style*="font-size: 52px"], [style*="font-size:52px"] { font-size: 41px !important; }
  [style*="font-size: 53px"], [style*="font-size:53px"] { font-size: 42px !important; }
  [style*="font-size: 54px"], [style*="font-size:54px"] { font-size: 42px !important; }
  [style*="font-size: 55px"], [style*="font-size:55px"] { font-size: 43px !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 43px !important; }
  [style*="font-size: 57px"], [style*="font-size:57px"] { font-size: 44px !important; }
  [style*="font-size: 58px"], [style*="font-size:58px"] { font-size: 44px !important; }
  [style*="font-size: 59px"], [style*="font-size:59px"] { font-size: 45px !important; }
  [style*="font-size: 60px"], [style*="font-size:60px"] { font-size: 45px !important; }
  [style*="font-size: 61px"], [style*="font-size:61px"] { font-size: 46px !important; }
  [style*="font-size: 62px"], [style*="font-size:62px"] { font-size: 47px !important; }
  [style*="font-size: 63px"], [style*="font-size:63px"] { font-size: 47px !important; }
  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 48px !important; }
  [style*="font-size: 65px"], [style*="font-size:65px"] { font-size: 48px !important; }
  [style*="font-size: 66px"], [style*="font-size:66px"] { font-size: 49px !important; }
  [style*="font-size: 67px"], [style*="font-size:67px"] { font-size: 49px !important; }
  [style*="font-size: 68px"], [style*="font-size:68px"] { font-size: 50px !important; }
  [style*="font-size: 69px"], [style*="font-size:69px"] { font-size: 50px !important; }
  [style*="font-size: 70px"], [style*="font-size:70px"] { font-size: 51px !important; }
  [style*="font-size: 71px"], [style*="font-size:71px"] { font-size: 51px !important; }
  [style*="font-size: 72px"], [style*="font-size:72px"] { font-size: 52px !important; }
  [style*="font-size: 73px"], [style*="font-size:73px"] { font-size: 53px !important; }
  [style*="font-size: 74px"], [style*="font-size:74px"] { font-size: 53px !important; }
  [style*="font-size: 75px"], [style*="font-size:75px"] { font-size: 54px !important; }
  [style*="font-size: 76px"], [style*="font-size:76px"] { font-size: 54px !important; }
  [style*="font-size: 77px"], [style*="font-size:77px"] { font-size: 55px !important; }
  [style*="font-size: 78px"], [style*="font-size:78px"] { font-size: 55px !important; }
  [style*="font-size: 79px"], [style*="font-size:79px"] { font-size: 56px !important; }
  [style*="font-size: 80px"], [style*="font-size:80px"] { font-size: 56px !important; }
  [style*="font-size: 81px"], [style*="font-size:81px"] { font-size: 57px !important; }
  [style*="font-size: 82px"], [style*="font-size:82px"] { font-size: 58px !important; }
  [style*="font-size: 83px"], [style*="font-size:83px"] { font-size: 58px !important; }
  [style*="font-size: 84px"], [style*="font-size:84px"] { font-size: 59px !important; }
  [style*="font-size: 85px"], [style*="font-size:85px"] { font-size: 59px !important; }
  [style*="font-size: 86px"], [style*="font-size:86px"] { font-size: 60px !important; }
  [style*="font-size: 87px"], [style*="font-size:87px"] { font-size: 60px !important; }
  [style*="font-size: 88px"], [style*="font-size:88px"] { font-size: 61px !important; }
  [style*="font-size: 89px"], [style*="font-size:89px"] { font-size: 61px !important; }
  [style*="font-size: 90px"], [style*="font-size:90px"] { font-size: 62px !important; }
  [style*="font-size: 91px"], [style*="font-size:91px"] { font-size: 62px !important; }
  [style*="font-size: 92px"], [style*="font-size:92px"] { font-size: 63px !important; }
  [style*="font-size: 93px"], [style*="font-size:93px"] { font-size: 64px !important; }
  [style*="font-size: 94px"], [style*="font-size:94px"] { font-size: 64px !important; }
  [style*="font-size: 95px"], [style*="font-size:95px"] { font-size: 65px !important; }
  [style*="font-size: 96px"], [style*="font-size:96px"] { font-size: 65px !important; }
  [style*="font-size: 97px"], [style*="font-size:97px"] { font-size: 66px !important; }
  [style*="font-size: 98px"], [style*="font-size:98px"] { font-size: 66px !important; }
  [style*="font-size: 99px"], [style*="font-size:99px"] { font-size: 67px !important; }
  [style*="font-size: 100px"], [style*="font-size:100px"] { font-size: 67px !important; }
  [style*="font-size: 101px"], [style*="font-size:101px"] { font-size: 68px !important; }
  [style*="font-size: 102px"], [style*="font-size:102px"] { font-size: 69px !important; }
  [style*="font-size: 103px"], [style*="font-size:103px"] { font-size: 69px !important; }
  [style*="font-size: 104px"], [style*="font-size:104px"] { font-size: 70px !important; }
  [style*="font-size: 105px"], [style*="font-size:105px"] { font-size: 70px !important; }
  [style*="font-size: 106px"], [style*="font-size:106px"] { font-size: 71px !important; }
  [style*="font-size: 107px"], [style*="font-size:107px"] { font-size: 71px !important; }
  [style*="font-size: 108px"], [style*="font-size:108px"] { font-size: 72px !important; }
  [style*="font-size: 109px"], [style*="font-size:109px"] { font-size: 72px !important; }
  [style*="font-size: 110px"], [style*="font-size:110px"] { font-size: 73px !important; }
  [style*="font-size: 111px"], [style*="font-size:111px"] { font-size: 73px !important; }
  [style*="font-size: 112px"], [style*="font-size:112px"] { font-size: 74px !important; }
  [style*="font-size: 113px"], [style*="font-size:113px"] { font-size: 75px !important; }
  [style*="font-size: 114px"], [style*="font-size:114px"] { font-size: 75px !important; }
  [style*="font-size: 115px"], [style*="font-size:115px"] { font-size: 76px !important; }
  [style*="font-size: 116px"], [style*="font-size:116px"] { font-size: 76px !important; }
  [style*="font-size: 117px"], [style*="font-size:117px"] { font-size: 77px !important; }
  [style*="font-size: 118px"], [style*="font-size:118px"] { font-size: 77px !important; }
  [style*="font-size: 119px"], [style*="font-size:119px"] { font-size: 78px !important; }
  [style*="font-size: 120px"], [style*="font-size:120px"] { font-size: 78px !important; }
  [style*="font-size: 121px"], [style*="font-size:121px"] { font-size: 79px !important; }
  [style*="font-size: 122px"], [style*="font-size:122px"] { font-size: 80px !important; }
  [style*="font-size: 123px"], [style*="font-size:123px"] { font-size: 80px !important; }
  [style*="font-size: 124px"], [style*="font-size:124px"] { font-size: 81px !important; }
  [style*="font-size: 125px"], [style*="font-size:125px"] { font-size: 81px !important; }
  [style*="font-size: 126px"], [style*="font-size:126px"] { font-size: 82px !important; }
  [style*="font-size: 127px"], [style*="font-size:127px"] { font-size: 82px !important; }
  [style*="font-size: 128px"], [style*="font-size:128px"] { font-size: 83px !important; }
  [style*="font-size: 129px"], [style*="font-size:129px"] { font-size: 83px !important; }
  [style*="font-size: 130px"], [style*="font-size:130px"] { font-size: 84px !important; }

  /* wide column sets collapse to two */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* sticky rails become normal flow */
  [style*="position: sticky"] { position: static !important; }
}

/* Blanket stacking stays phone-only: at tablet widths each page's own
   layout rules (880 / 1100 breakpoints) still apply, and the component
   blocks below carry the mv refinements up to 1024. */
@media (max-width: 760px) {
  /* clip (not hidden) so body never becomes its own scroll box; pages set html, body { height: 100% }, which with overflow hidden left a short inner scroller and a blank gap under the footer */
  html, body { overflow-x: hidden; overflow-x: clip; }
  body { height: auto !important; min-height: 100%; }
  /* car pages: the spacer under the footer that clears the fixed Book bar takes the footer colour */
  body:has([data-r="sbar"]) { background: #111316; }
  img, video, svg, iframe { max-width: 100%; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* every inline grid stacks (auto-fit grids are already fluid) */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([data-keep-cols]) {
    grid-template-columns: 1fr !important;
  }
  [style*="display: flex"]:not([style*="nowrap"]) { flex-wrap: wrap !important; }
  [style*="min-width:"]:not([style*="min-width: 0"]) { min-width: 0 !important; }
  [style*="max-width:"] { max-width: 100% !important; }

  /* page gutters */
  [style*="px 32px"], [style*=": 0 32px"],
  [style*="px 40px"], [style*=": 0 40px"],
  [style*="px 48px"], [style*=": 0 48px"],
  [style*="px 56px"], [style*="px 60px"], [style*="px 64px"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  /* tall section tops */
  [style*="padding: 130px"], [style*="padding: 120px"], [style*="padding: 118px"],
  [style*="padding: 110px"], [style*="padding: 100px"], [style*="padding: 96px"],
  [style*="padding: 92px"], [style*="padding: 90px"], [style*="padding: 88px"],
  [style*="padding: 84px"], [style*="padding: 80px"], [style*="padding: 76px"],
  [style*="padding: 72px"], [style*="padding: 70px"], [style*="padding: 68px"],
  [style*="padding: 64px"] { padding-top: 52px !important; }

  /* comfortable tap targets on links/buttons that render as pills */
  a[style*="border-radius: 100px"], button[style*="border-radius: 100px"] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 600px) {
  [style*="font-size: 34px"], [style*="font-size:34px"] { font-size: 27px !important; }
  [style*="font-size: 35px"], [style*="font-size:35px"] { font-size: 27px !important; }
  [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 27px !important; }
  [style*="font-size: 37px"], [style*="font-size:37px"] { font-size: 28px !important; }
  [style*="font-size: 38px"], [style*="font-size:38px"] { font-size: 28px !important; }
  [style*="font-size: 39px"], [style*="font-size:39px"] { font-size: 28px !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 29px !important; }
  [style*="font-size: 41px"], [style*="font-size:41px"] { font-size: 29px !important; }
  [style*="font-size: 42px"], [style*="font-size:42px"] { font-size: 29px !important; }
  [style*="font-size: 43px"], [style*="font-size:43px"] { font-size: 30px !important; }
  [style*="font-size: 44px"], [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size: 45px"], [style*="font-size:45px"] { font-size: 30px !important; }
  [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 31px !important; }
  [style*="font-size: 47px"], [style*="font-size:47px"] { font-size: 31px !important; }
  [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 31px !important; }
  [style*="font-size: 49px"], [style*="font-size:49px"] { font-size: 32px !important; }
  [style*="font-size: 50px"], [style*="font-size:50px"] { font-size: 32px !important; }
  [style*="font-size: 51px"], [style*="font-size:51px"] { font-size: 32px !important; }
  [style*="font-size: 52px"], [style*="font-size:52px"] { font-size: 33px !important; }
  [style*="font-size: 53px"], [style*="font-size:53px"] { font-size: 33px !important; }
  [style*="font-size: 54px"], [style*="font-size:54px"] { font-size: 33px !important; }
  [style*="font-size: 55px"], [style*="font-size:55px"] { font-size: 34px !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size: 57px"], [style*="font-size:57px"] { font-size: 35px !important; }
  [style*="font-size: 58px"], [style*="font-size:58px"] { font-size: 35px !important; }
  [style*="font-size: 59px"], [style*="font-size:59px"] { font-size: 35px !important; }
  [style*="font-size: 60px"], [style*="font-size:60px"] { font-size: 36px !important; }
  [style*="font-size: 61px"], [style*="font-size:61px"] { font-size: 36px !important; }
  [style*="font-size: 62px"], [style*="font-size:62px"] { font-size: 36px !important; }
  [style*="font-size: 63px"], [style*="font-size:63px"] { font-size: 37px !important; }
  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 37px !important; }
  [style*="font-size: 65px"], [style*="font-size:65px"] { font-size: 37px !important; }
  [style*="font-size: 66px"], [style*="font-size:66px"] { font-size: 38px !important; }
  [style*="font-size: 67px"], [style*="font-size:67px"] { font-size: 38px !important; }
  [style*="font-size: 68px"], [style*="font-size:68px"] { font-size: 38px !important; }
  [style*="font-size: 69px"], [style*="font-size:69px"] { font-size: 39px !important; }
  [style*="font-size: 70px"], [style*="font-size:70px"] { font-size: 39px !important; }
  [style*="font-size: 71px"], [style*="font-size:71px"] { font-size: 39px !important; }
  [style*="font-size: 72px"], [style*="font-size:72px"] { font-size: 40px !important; }
  [style*="font-size: 73px"], [style*="font-size:73px"] { font-size: 40px !important; }
  [style*="font-size: 74px"], [style*="font-size:74px"] { font-size: 40px !important; }
  [style*="font-size: 75px"], [style*="font-size:75px"] { font-size: 41px !important; }
  [style*="font-size: 76px"], [style*="font-size:76px"] { font-size: 41px !important; }
  [style*="font-size: 77px"], [style*="font-size:77px"] { font-size: 41px !important; }
  [style*="font-size: 78px"], [style*="font-size:78px"] { font-size: 42px !important; }
  [style*="font-size: 79px"], [style*="font-size:79px"] { font-size: 42px !important; }
  [style*="font-size: 80px"], [style*="font-size:80px"] { font-size: 42px !important; }
  [style*="font-size: 81px"], [style*="font-size:81px"] { font-size: 43px !important; }
  [style*="font-size: 82px"], [style*="font-size:82px"] { font-size: 43px !important; }
  [style*="font-size: 83px"], [style*="font-size:83px"] { font-size: 43px !important; }
  [style*="font-size: 84px"], [style*="font-size:84px"] { font-size: 44px !important; }
  [style*="font-size: 85px"], [style*="font-size:85px"] { font-size: 44px !important; }
  [style*="font-size: 86px"], [style*="font-size:86px"] { font-size: 44px !important; }
  [style*="font-size: 87px"], [style*="font-size:87px"] { font-size: 45px !important; }
  [style*="font-size: 88px"], [style*="font-size:88px"] { font-size: 45px !important; }
  [style*="font-size: 89px"], [style*="font-size:89px"] { font-size: 45px !important; }
  [style*="font-size: 90px"], [style*="font-size:90px"] { font-size: 46px !important; }
  [style*="font-size: 91px"], [style*="font-size:91px"] { font-size: 46px !important; }
  [style*="font-size: 92px"], [style*="font-size:92px"] { font-size: 46px !important; }
  [style*="font-size: 93px"], [style*="font-size:93px"] { font-size: 47px !important; }
  [style*="font-size: 94px"], [style*="font-size:94px"] { font-size: 47px !important; }
  [style*="font-size: 95px"], [style*="font-size:95px"] { font-size: 47px !important; }
  [style*="font-size: 96px"], [style*="font-size:96px"] { font-size: 48px !important; }
  [style*="font-size: 97px"], [style*="font-size:97px"] { font-size: 48px !important; }
  [style*="font-size: 98px"], [style*="font-size:98px"] { font-size: 48px !important; }
  [style*="font-size: 99px"], [style*="font-size:99px"] { font-size: 49px !important; }
  [style*="font-size: 100px"], [style*="font-size:100px"] { font-size: 49px !important; }
  [style*="font-size: 101px"], [style*="font-size:101px"] { font-size: 49px !important; }
  [style*="font-size: 102px"], [style*="font-size:102px"] { font-size: 50px !important; }
  [style*="font-size: 103px"], [style*="font-size:103px"] { font-size: 50px !important; }
  [style*="font-size: 104px"], [style*="font-size:104px"] { font-size: 50px !important; }
  [style*="font-size: 105px"], [style*="font-size:105px"] { font-size: 51px !important; }
  [style*="font-size: 106px"], [style*="font-size:106px"] { font-size: 51px !important; }
  [style*="font-size: 107px"], [style*="font-size:107px"] { font-size: 52px !important; }
  [style*="font-size: 108px"], [style*="font-size:108px"] { font-size: 52px !important; }
  [style*="font-size: 109px"], [style*="font-size:109px"] { font-size: 52px !important; }
  [style*="font-size: 110px"], [style*="font-size:110px"] { font-size: 53px !important; }
  [style*="font-size: 111px"], [style*="font-size:111px"] { font-size: 53px !important; }
  [style*="font-size: 112px"], [style*="font-size:112px"] { font-size: 53px !important; }
  [style*="font-size: 113px"], [style*="font-size:113px"] { font-size: 54px !important; }
  [style*="font-size: 114px"], [style*="font-size:114px"] { font-size: 54px !important; }
  [style*="font-size: 115px"], [style*="font-size:115px"] { font-size: 54px !important; }
  [style*="font-size: 116px"], [style*="font-size:116px"] { font-size: 55px !important; }
  [style*="font-size: 117px"], [style*="font-size:117px"] { font-size: 55px !important; }
  [style*="font-size: 118px"], [style*="font-size:118px"] { font-size: 55px !important; }
  [style*="font-size: 119px"], [style*="font-size:119px"] { font-size: 56px !important; }
  [style*="font-size: 120px"], [style*="font-size:120px"] { font-size: 56px !important; }
  [style*="font-size: 121px"], [style*="font-size:121px"] { font-size: 56px !important; }
  [style*="font-size: 122px"], [style*="font-size:122px"] { font-size: 57px !important; }
  [style*="font-size: 123px"], [style*="font-size:123px"] { font-size: 57px !important; }
  [style*="font-size: 124px"], [style*="font-size:124px"] { font-size: 57px !important; }
  [style*="font-size: 125px"], [style*="font-size:125px"] { font-size: 58px !important; }
  [style*="font-size: 126px"], [style*="font-size:126px"] { font-size: 58px !important; }
  [style*="font-size: 127px"], [style*="font-size:127px"] { font-size: 58px !important; }
  [style*="font-size: 128px"], [style*="font-size:128px"] { font-size: 59px !important; }
  [style*="font-size: 129px"], [style*="font-size:129px"] { font-size: 59px !important; }
  [style*="font-size: 130px"], [style*="font-size:130px"] { font-size: 59px !important; }
  [style*="padding: 130px"], [style*="padding: 120px"], [style*="padding: 118px"],
  [style*="padding: 110px"], [style*="padding: 100px"], [style*="padding: 96px"],
  [style*="padding: 92px"], [style*="padding: 90px"], [style*="padding: 88px"],
  [style*="padding: 84px"], [style*="padding: 80px"], [style*="padding: 76px"],
  [style*="padding: 72px"], [style*="padding: 70px"], [style*="padding: 68px"],
  [style*="padding: 64px"] { padding-top: 44px !important; }
  [style*="px 32px"], [style*=": 0 32px"],
  [style*="px 40px"], [style*=": 0 40px"],
  [style*="px 48px"], [style*=": 0 48px"],
  [style*="px 56px"], [style*="px 60px"], [style*="px 64px"] {
    padding-left: 15px !important; padding-right: 15px !important;
  }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
}


/* ============================================================
   Reservation & content pages: mobile layout pass (loaded last)
   ============================================================ */

@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"] > *,
  [style*="grid-template-columns: repeat(2"] > * { min-width: 0 !important; }

  /* form controls: 16px stops iOS zoom-on-focus, 46px is a real tap target */
  input, select, textarea { font-size: 16px !important; min-height: 46px; box-sizing: border-box !important; }
  textarea { min-height: 88px; }
  select[style*="width: 170px"] { width: 108px !important; }

  a[style*="border-radius: 100px"], button[style*="border-radius: 100px"] { min-height: 46px; }
  a[style*="text-align: center"][style*="border-radius: 100px"],
  button[style*="width: 100%"] { width: 100% !important; box-sizing: border-box !important; }

  [style*="aspect-ratio: 16 / 11"], [style*="aspect-ratio: 16 / 9"] { aspect-ratio: 4 / 3 !important; }

  [style*="padding: 30px"], [style*="padding: 32px"], [style*="padding: 34px"],
  [style*="padding: 36px"], [style*="padding: 38px"], [style*="padding: 40px"] { padding: 20px !important; }

  [style*="border-radius: 24px"], [style*="border-radius: 22px"] { border-radius: 18px !important; }

  [style*="justify-content: space-between"] { gap: 10px !important; }
  [style*="white-space: nowrap"] { white-space: normal !important; }

  * { max-width: 100%; }
  [style*="position: fixed"] { max-width: 100vw; }
}

/* Insurance & excess card, mobile. */
@media (max-width: 640px) {
  section:has(> [data-r="excessgrid"]) { padding: 0 20px !important; }
  div[data-r="excessgrid"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px !important;
    padding: 24px 20px !important;
    align-items: start !important;
  }
  div[data-r="excessgrid"][style] > div:first-child { grid-column: 1 / -1 !important; }
  div[data-r="excessgrid"][style] > div:not(:first-child) {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid #ece9e1 !important;
    padding-top: 16px !important;
  }
  div[data-r="excessgrid"][style] [style*="font-size: 26px"] { font-size: 21px !important; }
  div[data-r="excessgrid"][style] h2[style] { font-size: 21px !important; }
}

/* Footer + class-page CTA, mobile. */
@media (max-width: 640px) {
  footer[style] > div[style] { padding: 44px 20px 0 !important; }
  /* the columns are accordion rows now, so they stack full width at every
     device size; the old 2-up grid and its spacing overrides are gone */
  div[data-r="footcols"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    /* the last accordion row already carries its own bottom padding, so the
       grid's own padding stacked on top of it left a wide dead band above the
       divider below */
    padding-bottom: 6px !important;
  }
  div[data-r="footcols"][style] > div:first-child p[style] { max-width: none !important; }
  div[data-r="footloc"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 18px 0 !important;
  }
  div[data-r="footloc"][style] > div[style] { padding: 14px !important; border-radius: 12px !important; }
  div[data-r="footloc"][style] > div[style] p[style] { font-size: 12px !important; }
  footer[style] > div[style] > div:last-child { padding: 20px 0 !important; justify-content: center !important; text-align: center !important; gap: 14px !important; }
  footer[style] > div[style] > div:last-child > span { flex: 1 0 100% !important; text-align: center !important; }

  [data-r="clscta"] { padding: 44px 26px !important; border-radius: 22px !important; }
  [data-r="clscta"] > div[style*="position: relative"] { gap: 28px !important; }
  [data-r="clscta"] h2[style] { font-size: 30px !important; }
  [data-r="clscta"] p[style] { font-size: 15px !important; margin-top: 16px !important; }
  [data-r="clscta"] [style*="margin-bottom: 22px"] { margin-bottom: 18px !important; }
  [data-r="clscta"] [style*="flex-direction: column"] { width: 100% !important; }
  [data-r="clscta"] a[style] { width: 100% !important; padding: 15px 20px !important; font-size: 15px !important; box-sizing: border-box !important; }
}

/* Class pages: "Browse other classes" is one swipeable row on device.
   Must live at 1024px, not 640px - in this project "device" means tablet too. */
@media (max-width: 1024px) {
  /* one swipeable row of smaller cards rather than a 2x2 block */
  [data-r="clsbrowse"] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    margin-right: -16px !important;
    padding-right: 16px !important;
  }
  [data-r="clsbrowse"]::-webkit-scrollbar { display: none; }
  /* the photo band stays, so the padding override must not hit the card itself
     (which now has zero padding) - only its text body */
  /* px-capped, not a bare percentage: a percentage basis scales UP with the
     viewport and ends up wider than the 2-col cell it replaced on tablets */
  [data-r="clsbrowse"] > a[style] { min-height: 0 !important; gap: 0 !important; flex: 0 0 min(58%, 250px) !important; max-width: min(58%, 250px) !important; scroll-snap-align: start; }
  [data-r="clsbrowse"] > a > div[data-r="clsbrowseimg"][style] {
    aspect-ratio: 4 / 3 !important;
    /* the card is a column flex, so the main axis is vertical and the band's
       aspect-ratio height gets shrunk away to nothing without this */
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
  }
  [data-r="clsbrowse"] > a > div:not([data-r="clsbrowseimg"])[style] { padding: 12px 13px 14px !important; }
  [data-r="clsbrowse"] h3[style] { font-size: 15px !important; }
  [data-r="clsbrowse"] p[style] { font-size: 12px !important; }
  [data-r="clsctasec"] h2[style] { font-size: 27px !important; }
}
@media (max-width: 640px) {
  /* phones get a narrower card so the next one peeks in */
  [data-r="clsbrowse"] > a[style] { flex-basis: 66% !important; max-width: 66% !important; }
}
@media (max-width: 640px) {
  section[data-r="clsctasec"][style] { margin-top: 56px !important; padding: 0 20px !important; }
}

/* Class pages (economy/premium/luxury/exotic): fleet cards stay 2-up on mobile. */
@media (max-width: 1024px) {
  div[data-r="clsgrid"][style]:not([data-no]):not([data-no2]),
  div[data-r="fleetgrid"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Gallery thumbnail strip: shrink to fit its 3 thumbs and centre it. */
@media (max-width: 640px) {
  div[data-gthumbs][style]:not([data-no]):not([data-no2]) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  div[data-gthumbs][style] > button[style] { flex: 0 0 auto !important; }
  div[data-gthumbs][style] { bottom: 14px !important; }
  /* trim the dead space above the car (phone only: the ≤640 baseline is a tall 1/1) */
  div[data-r="stage"][style] { aspect-ratio: 7 / 5.1 !important; margin-top: -6px !important; }
  section[style*="padding: 34px 32px 8px"] { padding-top: 4px !important; }
  /* single slide inset for phones: pulls the car up and clears the thumb strip */
  div[data-r="stage"][style] > div[data-gslide] { inset: -4% 3% 84px 3% !important; }
}

/* phone + tablet: tighten only the rows above the stage. The stage ratio itself
   is left alone here - at 641-1024px the page baseline is already a short 21/9,
   so forcing a taller box would add dead space above the bottom-aligned car. */
@media (max-width: 1024px) {
  [data-r="crumbrow"] { margin-bottom: 6px !important; }
}

/* Trim switcher stays top right, in the breadcrumb row, at every width. */
@media (max-width: 1024px) {
  /* the stacked hero left a hole between the thumbnails and the title:
     the dead stage box under the thumbnail strip, then the chip row margin */
  div[data-gthumbs][style] {
    bottom: 8px !important;
    /* the authored 0 12px 30px -18px reaches 9px below the strip, but dropping
       it to 8px leaves only 8px inside the stage's overflow: hidden, so the
       blurred tail was sliced into a hard line. Tightened to reach 4px, which
       clears the stage edge and matches the site-wide shallow-shadow value. */
    box-shadow: rgba(17, 19, 22, 0.3) 0 6px 16px -10px !important;
  }
  div[data-r="herotext"][style] > div:first-child[style*="margin-bottom: 20px"] { margin-bottom: 10px !important; }
  [data-r="crumbrow"] { align-items: flex-start !important; }
  [data-r="trimtop"] {
    flex: 0 0 auto;
    /* stays hard right even when the breadcrumb wraps it onto its own line */
    margin-left: auto !important;
    max-width: 58vw;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding: 3px !important;
  }
  [data-r="trimtop"]::-webkit-scrollbar { display: none; }
  /* the global 46px tap target sets the height, so match it horizontally or
     a one-letter trim renders as a tall oval */
  [data-r="trimtop"] > button { min-width: 46px; padding: 8px 18px !important; font-size: 13px !important; }

  /* 3+ trims: two pills plus a "+N more" control, the rest in a floating
     panel so expanding never moves the hero below */
  /* folded rows hold two pills plus the control, so the 58vw cap that made the
     full row scroll sideways is no longer needed and only squeezes the control */
  [data-r="trimtop"][data-nxtrim-has] { position: relative; overflow: visible !important; max-width: none; }
  [data-r="trimtop"] > button[data-nxtrim="off"] { display: none !important; }
  [data-r="trimtop"] > button[data-nxtrim-ctl] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 44px; flex-shrink: 0; padding: 8px 14px !important;
    border: none; border-radius: 100px; cursor: pointer; background: transparent;
    font-family: 'Space Grotesk', sans-serif; font-size: 13px !important; font-weight: 600;
    color: #4a4d52; white-space: nowrap;
  }
  [data-r="trimtop"] > button[data-nxtrim-ctl]:hover { background: rgba(17,19,22,0.05); color: #111316; }
  [data-nxtrim-chev] { transition: transform .22s ease; }
  [data-r="trimtop"][data-nxtrim-open] > button[data-nxtrim-ctl] { background: rgba(17,19,22,0.06); color: #111316; }
  [data-r="trimtop"][data-nxtrim-open] [data-nxtrim-chev] { transform: rotate(180deg); }
  [data-nxtrim-panel] {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    display: none; flex-wrap: wrap; gap: 6px;
    min-width: 168px; max-width: min(86vw, 320px);
    background: #fff; border: 1px solid #e4e2db; border-radius: 18px; padding: 8px;
    box-shadow: 0 26px 54px -26px rgba(17,19,22,0.45);
  }
  [data-r="trimtop"][data-nxtrim-open] [data-nxtrim-panel] { display: flex; }
  [data-nxtrim-panel] > button {
    flex: 1 1 auto; min-height: 44px; border: none; cursor: pointer;
    background: #f6f5f1; border-radius: 100px; padding: 10px 16px;
    font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
    color: #2c2f34; white-space: nowrap;
  }
  [data-nxtrim-panel] > button:hover { background: #111316; color: #fff; }
}

@media (max-width: 560px) {
  [style*="minmax(118px"], [style*="minmax(120px"],
  [style*="minmax(130px"], [style*="minmax(140px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="padding: 60px 56px"], [style*="padding: 60px"] { padding: 34px 20px !important; }
}



/* ===== Contact page, mobile ===== */
@media (max-width: 1024px) {
  section[data-r="cform"][style] { padding: 0 16px !important; margin-top: -32px !important; }
  section[data-r="cform"] > div[style] { gap: 14px !important; }
  div[data-r="cformcard"][style] { padding: 22px 18px !important; border-radius: 16px !important; }
  div[data-r="cformcard"] h2[style] { font-size: 21px !important; margin-bottom: 16px !important; }
  section[data-r="cform"] [style*="border-radius: 18px"][style*="padding: 28px"] { padding: 18px !important; }
  section[data-r="cloc"][style] { padding: 54px 16px 0 !important; }
  section[data-r="cloc"] h2[style] { font-size: 28px !important; }
  section[data-r="cloc"] > div:first-child[style] { margin-bottom: 20px !important; }
  section[data-r="cloc"] [style*="padding: 22px"] { padding: 16px !important; }
  /* the three pin cells stack under a full-width map rather than squeezing
     into three columns, and the map gets a taller crop so it stays readable */
  div[data-r="clocwrap"][style] { border-radius: 16px !important; }
  /* on a phone each box opens its own map inline, so the shared one below the
     list is redundant */
  div[data-r="clocmap"][style] { display: none !important; }
  div[data-r="clocmapin"][style] { display: block !important; }
  div[data-r="clocpins"][style] { grid-template-columns: 1fr !important; border-bottom: 0 !important; }
  div[data-r="clocpin"][style] { border-left: 0 !important; border-top: 1px solid #ece9e1 !important; box-shadow: none !important; }
  div[data-r="clocpin"]:first-child[style] { border-top: 0 !important; }
  /* the shared map above is hidden on device, so the note needs its own rule
     to read as a separate band under the last pin cell */
  div[data-r="clocnote"][style] { padding: 14px 16px !important; gap: 11px !important; align-items: flex-start !important; }
  div[data-r="clocnote"] > span:first-child { width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 15px !important; }
  div[data-r="clocnote"] > span:nth-child(2) > span:first-child { font-size: 14px !important; }
  div[data-r="clocnote"] > span:nth-child(2) > span:last-child { font-size: 12.5px !important; }
  div[data-r="clocnote"] > span:last-child { font-size: 15.5px !important; }
  /* the global `display: flex` wrap rule above also hits this row, which drops
     the name and address below the numbered pin instead of beside it */
  div[data-r="clocpin"] > button[style] { flex-wrap: nowrap !important; }
  div[data-r="clocpin"][data-active="1"][style] { box-shadow: inset 3px 0 0 0 #4ECEC4 !important; }
  div[data-r="clocpin"] a[style] { min-height: 42px !important; }
}

@media (max-width: 1024px) {
  div[data-r="cdetails"][style] { gap: 12px !important; }
  div[data-r="cdetails"] > div[style] { padding: 18px 16px !important; border-radius: 16px !important; }
  div[data-r="cdetails"] h3[style] { font-size: 16px !important; margin-bottom: 12px !important; }
  /* the rows use padding 8px + margin -8px so the hover wash bleeds past the
     text; on device that inset stacks with the card padding and leaves a big
     dead gap under the last row, so drop the trick and let the card hug them */
  div[data-r="cdetails"] a[style] { padding: 0 !important; margin: 0 !important; gap: 11px !important; min-height: 44px !important; }
  div[data-r="cdetails"] > div:first-child > div[style] { gap: 14px !important; }
  div[data-r="cdetails"] a span[style*="width: 42px"] { width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: 15px !important; }
  div[data-r="cdetails"] a span span[style*="font-size:15px"] { font-size: 14.5px !important; }
  div[data-r="cdetails"] > div:last-child > div[style] { gap: 9px !important; }
  div[data-r="cdetails"] > div:last-child div[style*="justify-content: space-between"] { font-size: 13.5px !important; gap: 12px !important; }
}

@media (max-width: 1024px) {
  div[data-r="cformcard"] form > div[style*="grid-template-columns"] {
    gap: 11px !important;
    /* the global collapse rules leave this grid with two uneven tracks
       (111px / 240px), which squashes the name and service fields */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  div[data-r="cformcard"] label[style] { gap: 5px !important; }
  div[data-r="cformcard"] label > span[style] { font-size: 12px !important; }
  div[data-r="cformcard"] input[style],
  div[data-r="cformcard"] select[style],
  div[data-r="cformcard"] textarea[style] {
    font-size: 16px !important;
    padding: 12px 13px !important;
    min-height: 46px !important;
    border-radius: 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  div[data-r="cformcard"] textarea[style] { min-height: 108px !important; }
  div[data-r="cformcard"] button[type="submit"][style] { padding: 15px !important; font-size: 15.5px !important; margin-top: 16px !important; border-radius: 11px !important; }
  div[data-r="cformcard"] > div > p[style] { font-size: 12px !important; margin-top: 12px !important; }
}
@media (max-width: 640px) {
  /* one field per row on a phone: two-up puts the labels on two lines and the
     date and select controls below a comfortable tap width */
  div[data-r="cformcard"] form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  div[data-r="cformcard"] form > div > label[style] { grid-column: auto !important; }
  div[data-r="cformcard"] input[style],
  div[data-r="cformcard"] select[style] { min-height: 48px !important; }
  div[data-r="cformcard"] button[type="submit"][style] { min-height: 52px !important; }
}

/* ===== Promotions: daily flash sale block, mobile ===== */
@media (max-width: 1024px) {
  section[data-r="flashsec"][style] { padding: 0 14px !important; }
  /* the flash card pulls up into the hero, so the hero needs clearance below the
     lede on this page or the two collide */
  header[data-r="nxhero"]:has(+ section#flash)[style] { padding-bottom: 76px !important; }
  /* the contact form card pulls up into the hero the same way the flash card
     does, so the hero needs the same clearance below its lede */
  header[data-r="nxhero"]:has(+ section[data-r="cform"])[style] { padding-bottom: 72px !important; }
  section#flash[data-r="flashsec"][style] { margin-top: 24px !important; }
  section[data-r="flashsec"]:not(#flash)[style] { margin-top: 40px !important; }
  div[data-r="flashcard"][style] { padding: 26px 18px 24px !important; border-radius: 22px !important; }
  div[data-r="flashcard"] > div[style*="grid-template-columns"] { gap: 26px !important; }
  div[data-r="flashcard"] h2[style] { font-size: 28px !important; margin-top: 14px !important; }
  div[data-r="flashcard"] > div > div > p[style] { font-size: 14.5px !important; margin-top: 12px !important; }
  div[data-r="flashcard"] a[href*="book.nexxcarrental"][style] { padding: 14px 24px !important; font-size: 14.5px !important; }
  div[data-r="flashcard"] [style*="repeat(3, 1fr)"] { gap: 8px !important; }
  div[data-r="flashcard"] [style*="repeat(3, 1fr)"] > div[style] { padding: 14px 4px !important; border-radius: 13px !important; }
  div[data-r="flashcard"] [style*="repeat(3, 1fr)"] [style*="font-size: 38px"] { font-size: 27px !important; }
  div[data-r="flashcard"] > div[style*="height: 1px"] { margin: 28px 0 20px !important; }
  div[data-r="flashcard"] h3[style] { font-size: 19px !important; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"]{ flex: 0 0 212px !important; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > div:first-child[style]{ height: 118px !important; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > div:last-child[style]{ padding: 13px 14px 15px !important; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"] [style*="font-size: 25px"]{ font-size: 21px !important; }
}

div[data-r="pkgrid"] > div { scroll-snap-align: start; }
@media (min-width: 1025px) {
  /* eight packages as a 4 x 2 grid inside the flash-style box */
  div[data-r="pkgrid"][style] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===== Promotions: short-term packages, mobile ===== */
@media (max-width: 1024px) {
  div[data-r="pkbox"][style] { border-radius: 22px !important; padding: 16px !important; }
  /* one card per row, sized so the next one peeks in at the right edge as a
     scroll affordance; still 2 rows deep, flowing into new columns sideways */
  div[data-r="pkgrid"][style] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-columns: none !important;
    grid-auto-columns: 82% !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  div[data-r="pkgrid"]::-webkit-scrollbar { display: none; }
}
@media (max-width: 1024px) {
  section[data-r="pksec"][style] { padding: 56px 16px 0 !important; }
  section[data-r="pksec"] > div:first-child[style],
  section[data-r="clsctasec"] > div:first-child[style] { margin-bottom: 20px !important; }
  section[data-r="pksec"] h2[style],
  section[data-r="clsctasec"] h2[style] { font-size: 26px !important; line-height: 1.12 !important; }
  div[data-r="pkgrid"] > div[style] { padding: 16px 14px !important; border-radius: 14px !important; }
  div[data-r="pkgrid"] [style*="font-size: 38px"] { font-size: 28px !important; }
  div[data-r="pkgrid"] [style*="font-size: 22px"] { font-size: 17px !important; margin-top: 8px !important; }
  div[data-r="pkgrid"] [style*="font-size: 13px"] { font-size: 12.5px !important; margin-top: 9px !important; }
  div[data-r="pkgrid"] [style*="margin-top: 18px"] { margin-top: 12px !important; padding-top: 10px !important; }
  section[data-r="pksec"] > p[style],
  section[data-r="clsctasec"] > p[style] { font-size: 12.5px !important; margin-top: 16px !important; }
}

/* ===== Delivery: zones table, device =====
   Three grid columns leave the area names at two or three words per line on a
   phone. Each row becomes a stacked card instead: area on its own full-width
   line, then the fee and the free-delivery note side by side. The header row
   goes, since "RM40 / way" and "Free on 3+ day rentals" read for themselves. */
@media (max-width: 1024px) {
  section[data-r="dzone"][style] { padding: 44px 16px 0 !important; }
  section[data-r="dzone"] h2[style] { font-size: 26px !important; line-height: 1.12 !important; }
  section[data-r="dzone"] > div:first-child[style] { font-size: 11px !important; }
  [data-r="dzone"] div[data-r="dztbl"][style] { margin-top: 18px !important; border-radius: 14px !important; }
  /* six columns will not fit a phone, so each row becomes a card: the area name
     on top, then the four price cells as a labelled 2x2 grid */
  [data-r="dzone"] [data-r="dzhead"][style], [data-r="dnattbl"] [data-r="dzhead"][style] { display: none !important; }
  [data-r="dzone"] [data-r="dzbody"] > [data-r="dzrow"][style],
  [data-r="dnattbl"] [data-r="dzbody"] > [data-r="dzrow"][style] {
    display: block !important;
    padding: 14px 16px !important;
  }
  [data-r="dzone"] [data-r="dzrow"] > div:first-child[style],
  [data-r="dnattbl"] [data-r="dzrow"] > div:first-child[style] { font-size: 14px !important; line-height: 1.4 !important; }
  [data-r="dzone"] [data-r="dzrow"] > div:first-child > span[style],
  [data-r="dnattbl"] [data-r="dzrow"] > div:first-child > span[style] { font-size: 11.5px !important; }
  [data-r="dzone"] [data-r="dzrow"] > [data-r="dzfee"][style],
  [data-r="dnattbl"] [data-r="dzrow"] > [data-r="dzfee"][style] {
    font-size: 12.5px !important;
    color: #9a948a !important;
    margin-top: 8px !important;
    padding-left: 19px;
  }
  [data-r="dzone"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Zone fee "; }
  [data-r="dnattbl"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Rate "; }
  [data-r="dnattbl"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::before,
  [data-r="dnattbl"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::after { content: ""; }
  [data-r="dzone"] [data-r="dzrow"] > [data-r="dzfee"]::after,
  [data-r="dnattbl"] [data-r="dzrow"] > [data-r="dzfee"]::after { content: " / way"; }
  [data-r="dzone"] [data-r="dzrow"] > [data-r="dzd"][style],
  [data-r="dnattbl"] [data-r="dzrow"] > [data-r="dzd"][style] {
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
    width: calc(50% - 12px);
    margin: 10px 8px 0 0;
    padding-left: 19px;
    font-size: 14px !important;
  }
  [data-r="dzone"] [data-r="dzlbl"], [data-r="dnattbl"] [data-r="dzlbl"] { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a948a; }
  /* on the tinted no-delivery row the grey label goes muddy */
  [data-r="dnattbl"] [data-r="dzrow"][style*="eaf7f5"] [data-r="dzlbl"] { color: #3f8f88; }
}

/* ===== Delivery: closing CTA, device =====
   The four stats wrap into a ragged two-up at phone width and the buttons sit
   side by side breaking onto one-word lines. Stats become a clean 2x2 grid and
   the buttons go full width. */
@media (max-width: 1024px) {
  section[data-r="dctasec"][style] { padding: 44px 16px 48px !important; }
  section[data-r="dctasec"] [data-r="cta"][style] { padding: 28px 20px 26px !important; border-radius: 22px !important; }
  section[data-r="dctasec"] [data-r="cta"] > div:last-child[style] { gap: 24px !important; }
  section[data-r="dctasec"] [data-r="ctah"][style] { font-size: 30px !important; }
  section[data-r="dctasec"] [data-r="cta"] p[style] { font-size: 15px !important; margin-top: 12px !important; }

  div[data-r="dlvstats"][style] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
    margin-top: 24px !important;
  }
  div[data-r="dlvstats"] > div > div:first-child[style] { font-size: 18px !important; }
  div[data-r="dlvstats"] > div > div:last-child[style] { font-size: 12.5px !important; line-height: 1.4 !important; }

  /* nowrap + stretch: a wrapping column sized the button to its text (146px) */
  div[data-r="dlvbtns"][style] { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 9px !important; margin-top: 24px !important; }
  div[data-r="dlvbtns"] > a[style] { justify-content: center; width: 100% !important; box-sizing: border-box; min-height: 50px !important; padding: 0 22px !important; font-size: 15.5px !important; }

  div[data-r="dlvgtk"][style] { padding: 22px 18px !important; border-radius: 16px !important; }
  div[data-r="dlvgtk"] > div:first-child[style] { font-size: 11px !important; margin-bottom: 13px !important; }
  /* the tick and its text sit on one baseline, with the rows tightened so all
     four fit without the card running long */
  div[data-r="dlvgtk"] > div:last-child[style] { gap: 12px !important; }
  div[data-r="dlvgtk"] > div:last-child > div[style] { gap: 9px !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
  /* a global wrap rule plus an unshrinkable text block pushed the copy onto the
     line below the tick */
  div[data-r="dlvgtk"] > div:last-child > div > div { flex: 1 1 auto !important; min-width: 0 !important; }
  /* the tick needs the title's exact line box, or it rides a pixel high */
  div[data-r="dlvgtk"] > div:last-child > div > span[style] { font-size: 14px !important; line-height: 1.4 !important; flex: 0 0 auto; }
  div[data-r="dlvgtk"] > div:last-child > div > div > div:first-child[style] { font-size: 14px !important; line-height: 1.4 !important; }
  div[data-r="dlvgtk"] > div:last-child > div > div > div:last-child[style] { font-size: 12.5px !important; line-height: 1.45 !important; margin-top: 2px !important; }
}
@media (max-width: 560px) {
  div[data-r="dlvgtk"][style] { padding: 20px 16px !important; }
  div[data-r="dlvgtk"] > div:last-child > div > div > div:first-child[style] { font-size: 13.5px !important; }
  div[data-r="dlvgtk"] > div:last-child > div > div > div:last-child[style] { font-size: 12px !important; }
}
@media (max-width: 560px) {
  section[data-r="dctasec"] [data-r="ctah"][style] { font-size: 26px !important; }
  div[data-r="dlvstats"] > div > div:first-child[style] { font-size: 16.5px !important; }
}

/* ===== Reservation hero: photo fills the frame on tablets =====
   The 21/9 desktop stage is so short that background-size: contain fits the
   photo by HEIGHT, shrinking the car and leaving dead gaps at both sides. A
   5/4 stage makes the slide box narrower than the photo's own ratio (1.333
   cars, 1.409 SUV/MPV), so it fits by WIDTH and runs to the frame edges the
   way it already does on phones. Front and back share one canvas size per
   car, so both views land identically.
   A width-filling photo is inherently tall. On short landscape viewports that
   would push the name and price below the fold, so those get the short stage
   back outright - never a max-height on this element, which Chrome transfers
   back through the ratio and collapses the stage's WIDTH instead. */
@media (min-width: 641px) and (max-width: 1024px) {
  div[data-r="stage"][style] { aspect-ratio: 5 / 4 !important; }
  div[data-r="stage"][style] > div[data-gslide] { inset: -4% 3% 84px 3% !important; transform: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) and (max-height: 620px) {
  div[data-r="stage"][style] { aspect-ratio: 16 / 9 !important; }
  /* Short landscape viewport. The 84px bottom reservation left the box so flat
     (ratio ~2.0, vs canvases of 1.333 cars and 1.409 SUV/MPV) that contain was
     height-constrained and the car rendered only 540px inside an 869px stage.
     Height is the binding constraint here, so the fix reclaims part of that
     reservation: at 40px the box is tall enough to fit by WIDTH, taking the car
     to 591px and cutting the visible gap either side from 165px to 139px.
     40px is the floor, not a round number - the tyre line sits at 84.8% of the
     canvas, so with the image bottom-pinned the wheels end up 13px above the
     rail (which spans 18-94px up from the stage bottom). Any less and the car
     stops widening while the rail starts covering the wheels.
     Note the side inset is what the user actually sees as the gap: the slide box
     has no fill, so narrowing it alone just trades in-box gap for inset and
     moves nothing. The car still cannot reach the ~761px form card - that needs
     a 571px-tall photo box plus the rail inside a <=620px viewport.
     Split at 840px because the reclaim is height-dependent: below that the box
     is still height-fitted, so the car is smaller, its transparent under-tyre
     strip is shorter, and a 40px inset would drop the wheels ~10px BEHIND the
     rail. 64px there keeps 10px+ of clearance and still widens the car. */
  div[data-r="stage"][style] > div[data-gslide] { inset: 0 16% 64px 16% !important; }
}
@media (min-width: 840px) and (max-width: 1024px) and (max-height: 620px) {
  div[data-r="stage"][style] > div[data-gslide] { inset: 0 16% 40px 16% !important; }
}

/* ===== Delivery: nationwide rates, device =====
   Two columns squeeze the long multi-town rows into three lines each, so the
   copy stacks above a full-width rate list and each row keeps its town and
   price on one line apiece. */
@media (max-width: 1024px) {
  section[data-r="dnattbl"][style] { padding: 44px 16px 0 !important; }
  div[data-r="dnatgrid"][style] { grid-template-columns: 1fr !important; gap: 20px !important; }
  section[data-r="dnattbl"] h2[style] { font-size: 26px !important; line-height: 1.12 !important; }
  section[data-r="dnattbl"] > div > div:first-child > div:first-child[style] { font-size: 11px !important; }
  section[data-r="dnattbl"] p[style] { font-size: 14.5px !important; margin-top: 10px !important; }
  div[data-r="dnatgrid"] > div:first-child[style] { max-width: none !important; }
  div[data-r="dnatlist"][style] { border-radius: 14px !important; margin-top: 20px !important; }
  div[data-r="dnatlist"] > div[style] { padding: 14px 16px !important; gap: 12px !important; align-items: baseline !important; }
  div[data-r="dnatlist"] span:first-child[style] { font-size: 13.5px !important; line-height: 1.4 !important; }
  /* the inline white-space:nowrap on the price is nullified by this file's own
     [style*="white-space: nowrap"] reset, so it has to come from here or
     "RM650 / way" breaks across two lines */
  div[data-r="dnatlist"] span:last-child[style] { font-size: 13.5px !important; white-space: nowrap !important; }
  div[data-r="dnatlist"] > div:last-child[style] { padding: 13px 16px !important; font-size: 13px !important; }
  /* three info cards side by side get too narrow to read, so they stack */
  div[data-r="dnatzones"][style] { margin-top: 12px !important; }
  div[data-r="dnatzones"] > div[style] { flex: 1 1 auto !important; padding: 20px 18px 18px !important; border-radius: 14px !important; }
  div[data-r="dnatzones"] > div > div:first-child[style] { font-size: 11px !important; margin-bottom: 13px !important; }
  div[data-r="dnatzones"] > div > div:last-child > div > div:first-child[style] { font-size: 14px !important; }
  div[data-r="dnatzones"] > div > div:last-child > div > div:last-child[style] { font-size: 12.5px !important; }
}
@media (max-width: 560px) {
  /* the four-town row needs the full width, so each row stacks */
  div[data-r="dnatlist"] > div[style] { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; padding: 13px 16px !important; }
  div[data-r="dnatlist"] span:first-child[style] { font-size: 13.5px !important; }
  div[data-r="dnatlist"] span:last-child[style] { font-size: 13.5px !important; color: #0f8a80 !important; }
}

/* ===== Booking confirmation: booking-number pill, device =====
   The number must never break mid-string. An inline white-space: nowrap is
   nullified by this file's own [style*="white-space: nowrap"] reset, so the
   rule has to come from the stylesheet. */
@media (max-width: 1024px) {
  [data-r="sentbkno"][style],
  [data-r="formbkno"][style] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  /* the summary's booking box carries the close button on its right: one row */
  [data-r="sumbkno"][style] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  [data-r="sentbkno"] > span,
  [data-r="formbkno"] > span,
  [data-r="sumbkno"] > span { white-space: nowrap !important; }
}

/* ===== Promotions: coverage accordion, steps and CTA, device ===== */
@media (max-width: 1024px) {
  section#coverage[style] { padding: 56px 16px 0 !important; }
  section#coverage h2[style] { font-size: 26px !important; line-height: 1.12 !important; }
  section#coverage > div:first-child[style] { margin-bottom: 20px !important; }
  /* the two add-on cards stack rather than squeezing side by side */
  section#coverage > div:nth-child(2)[style] { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
  section#coverage > div:nth-child(2) > div[style] { padding: 20px 18px !important; }
  section#coverage > div:nth-child(3)[style] { padding: 24px 18px 26px !important; border-radius: 18px !important; }
  section#coverage > div:nth-child(3) h3[style] { font-size: 20px !important; }

  /* four class panels of excess tables are far too much to show at once on a
     phone, so each collapses to its class name until tapped */
  /* an existing #coverage rule at 1100px sets two columns with an id selector,
     so this needs the id too in order to win */
  #coverage div[data-cov-grid="1"][style] { grid-template-columns: 1fr !important; gap: 8px !important; }
  div[data-covcard="1"][style] { padding: 0 !important; border-radius: 12px !important; }
  div[data-covcard="1"] [data-covhead="1"][style] {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 0 !important; padding: 15px 16px; min-height: 48px;
    cursor: pointer; font-size: 15px !important;
  }
  div[data-covcard="1"] [data-covchev="1"] {
    display: block !important; flex: 0 0 auto;
    font-size: 20px; line-height: 1; color: rgba(255,255,255,0.5);
    transform: rotate(90deg); transition: transform .2s ease;
  }
  div[data-covcard="1"][data-open="1"] [data-covchev="1"] { transform: rotate(-90deg); color: var(--accent, #4ECEC4); }
  div[data-covcard="1"] [data-covrows="1"][style] { display: none !important; }
  div[data-covcard="1"][data-open="1"] [data-covrows="1"][style] {
    display: flex !important; padding: 0 16px 14px; gap: 10px !important;
  }

  /* steps: two columns, with the number inline beside its title so the card is
     short enough for four to fit on one screen. Needs its own display:grid -
     the home page's `section#how > div` flex rule also matches this page. */
  div[data-r="pwsteps"][style] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  div[data-r="pwsteps"] > div[style] { padding: 16px 14px 18px !important; border-radius: 14px !important; }
  div[data-r="pwsteps"] > div > div:first-child[style] {
    width: 28px !important; height: 28px !important;
    font-size: 13px !important; margin-bottom: 12px !important;
  }
  div[data-r="pwsteps"] h3[style] { font-size: 15px !important; margin-bottom: 6px !important; }
  div[data-r="pwsteps"] p[style] { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* CTA: one column, and the contact card drops below the copy */
  section[data-r="pctasec"][style] { margin-top: 56px !important; padding: 0 16px !important; }
  div[data-r="pcta"][style] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 28px 20px 26px !important;
    border-radius: 22px !important;
  }
  div[data-r="pcta"] h2[style] { font-size: 30px !important; line-height: 1.04 !important; margin-top: 14px !important; }
  div[data-r="pcta"] p[style] { font-size: 15px !important; margin-top: 12px !important; }
  /* full-width buttons: side by side they wrap to one-word lines */
  div[data-r="pcta"] > div:first-child > div:nth-child(4)[style] { flex-direction: column !important; gap: 9px !important; margin-top: 20px !important; }
  div[data-r="pcta"] > div:first-child > div:nth-child(4) > a[style] {
    display: flex !important; align-items: center; justify-content: center;
    padding: 14px 20px !important; font-size: 15px !important;
  }
  div[data-r="pcta"] > div:first-child > div:last-child[style] { gap: 10px 16px !important; margin-top: 18px !important; }
  div[data-r="pcta"] > div:first-child > div:last-child > span[style] { font-size: 12.5px !important; }
  div[data-r="pcta"] > div:last-child[style] { padding: 20px 18px !important; border-radius: 16px !important; }
}
@media (max-width: 600px) {
  /* the global repeat(4) collapse rule drops this to one column on phones;
     the step cards stay a 2x2 block, so it needs the extra specificity */
  section#how div[data-r="pwsteps"][style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}
@media (max-width: 560px) {
  div[data-r="pcta"] h2[style] { font-size: 26px !important; }
  div[data-r="pwsteps"] h3[style] { font-size: 14.5px !important; }
  div[data-r="pwsteps"] > div[style] { padding: 14px 12px 16px !important; }
  div[data-r="pwsteps"] p[style] { font-size: 12px !important; }
}

/* ===== Promotions: seasonal offers, device =====
   Seven festive cards in a 2-col grid left every photo postage-stamp sized and
   the copy squeezed. On device they become one swipeable row of image-led
   cards, so each offer gets a photo big enough to read and full-width copy. */
@media (max-width: 1024px) {
  section[data-r="snsec"][style] { padding: 56px 16px 0 !important; }
  section[data-r="snsec"] > div:first-child[style] { margin-bottom: 18px !important; }
  section[data-r="snsec"] h2[style] { font-size: 26px !important; line-height: 1.12 !important; }

  div[data-r="sngrid"][style]:not([data-no]):not([data-no2]) {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed past the section padding so a card can sit flush to the screen edge */
    margin-left: -16px !important;
    margin-right: -16px !important;
    max-width: none;
    /* the global hover-shadow cap keeps this to ~16px, so a small allowance
       is enough to stop overflow-x clipping it into a line */
    padding: 6px 16px 18px !important;
    margin-bottom: -12px !important;
    scroll-padding-left: 16px;
  }
  div[data-r="sngrid"]::-webkit-scrollbar { display: none; }

  div[data-r="sngrid"] > div[style] {
    /* capped in absolute terms: a percentage alone grows the card with the
       viewport, and the 4/3 image then eats a whole tablet screen */
    flex: 0 0 min(80%, 350px) !important;
    max-width: min(80%, 350px) !important;
    scroll-snap-align: start;
    border-radius: 16px !important;
  }
  div[data-r="sngrid"] > div > div:last-child[style] { padding: 16px 16px 18px !important; }
  div[data-r="sngrid"] h3[style] { font-size: 18px !important; margin-bottom: 7px !important; }
  div[data-r="sngrid"] p[style] { font-size: 13.5px !important; line-height: 1.5 !important; }
  /* the date line reads as an eyebrow above the title */
  div[data-r="sngrid"] [style*="font-size: 12px"] {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
  }
  div[data-r="sngrid"] > div > div:last-child > div:last-child[style] { gap: 6px !important; margin-top: 14px !important; }
  div[data-r="sngrid"] > div > div:last-child > div:last-child span[style] { font-size: 11.5px !important; padding: 5px 9px !important; }
}
@media (max-width: 560px) {
  div[data-r="sngrid"] > div[style] { flex-basis: min(86%, 350px) !important; max-width: min(86%, 350px) !important; }
  div[data-r="sngrid"] h3[style] { font-size: 17px !important; }
}

@media (max-width: 1024px) {
  /* flash sale cars: 2 rows flowing into 4 columns, slide across to 3 and 4 */
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-columns: none !important;
    grid-auto-columns: 46% !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* overflow clips vertically too, so leave room for the 4px hover lift above
       and its shadow below, cancelled by matching negative margins */
    margin: -12px 0 -16px !important;
    padding: 12px 0 20px !important;
  }
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]::-webkit-scrollbar{ display: none; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"]{
    flex: 0 0 auto !important;
    width: 100% !important;
    scroll-snap-align: start;
  }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > div:first-child[style]{ height: 104px !important; }
  div[data-r="flashcard"] a[style*="flex: 0 0 260px"] [style*="font-size: 16px"]{ font-size: 14px !important; }
}

@media (max-width: 600px) {
  /* a 46% column leaves ~148px of card - too narrow for the price row, and the
     card clips overflow, so "/day" disappears. 62% clears the ~175px it needs
     while still showing the next column and the slide to columns 3 and 4. */
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]) {
    grid-auto-columns: 62% !important;
  }
}

@media (max-width: 1024px) {
  /* countdown stays 3-up */
  div[data-r="flashcard"] div[style*="repeat(3, 1fr)"]:not([data-no]):not([data-no2]):not([data-no3]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

@media (max-width: 1024px) {
  /* a fixed height, not aspect-ratio: the badges inside set a min-content
     height, so a card with more badge text grew its own photo box */
  div[data-r="sngrid"] > div > div:first-child[style] {
    aspect-ratio: auto !important;
    height: 240px !important;
    min-height: 240px !important;
    flex: 0 0 240px !important;
    background-size: cover !important;
    padding: 12px !important;
  }
}
@media (max-width: 560px) {
  div[data-r="sngrid"] > div > div:first-child[style] { height: 210px !important; min-height: 210px !important; flex-basis: 210px !important; }
}

@media (max-width: 1024px) {
  /* flash sale headline block */
  div[data-r="flashcard"] > div[style*="grid-template-columns"] > div:first-child { text-align: center !important; }
  div[data-r="flashcard"] > div[style*="grid-template-columns"] > div:first-child > div:first-child[style] { font-size: 11px !important; padding: 6px 13px !important; }
  div[data-r="flashcard"] h2[style] { font-size: 27px !important; line-height: 1.08 !important; margin-top: 12px !important; }
  div[data-r="flashcard"] > div[style*="grid-template-columns"] > div:first-child > p[style] { font-size: 13.5px !important; line-height: 1.55 !important; margin: 10px auto 0 !important; max-width: 340px !important; }
}

@media (max-width: 1024px) {
  /* home fleet preview: 5 rows of 2 on device, the last cell being the
     More Cars tile, so 9 cars plus the tile */
  section#fleet div[data-r="fleetgrid"] > a:nth-of-type(n + 10):not([data-r="fleetmore"]) { display: none !important; }
  section#fleet div[data-r="fleetgrid"] > a[data-r="fleetmore"][style] { padding: 16px 14px !important; border-radius: 14px !important; gap: 8px !important; }
  section#fleet div[data-r="fleetgrid"] > a[data-r="fleetmore"] [style*="font-size: 40px"] { font-size: 30px !important; }
  section#fleet div[data-r="fleetgrid"] > a[data-r="fleetmore"] [style*="font-size: 17px"] { font-size: 15px !important; }
  section#fleet div[data-r="fleetgrid"] > a[data-r="fleetmore"] [style*="font-size: 12px"] { font-size: 11.5px !important; }
  section#fleet div[data-r="fleetgrid"] > a[data-r="fleetmore"] [style*="width: 38px"] { width: 34px !important; height: 34px !important; }
}

/* ===== Home reviews (featured card + review cards), mobile + tablet ===== */
@media (max-width: 1024px) {
  section[data-r="revsec"][style] { padding: 56px 16px 12px !important; }
  div[data-r="revhero"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    margin-bottom: 26px !important;
  }
  div[data-r="revimg"][style] { padding: 54px 20px 0 !important; }
  div[data-r="revimg"] > img[style] { max-height: 250px !important; }
  div[data-r="revimg"] > div[style*="radial-gradient"] { width: 240px !important; height: 240px !important; bottom: -30px !important; }
  div[data-r="revimg"] > div[style*="border-radius: 100px"] { top: 16px !important; left: 16px !important; padding: 7px 12px !important; font-size: 11.5px !important; }
  div[data-r="revbody"][style] { padding: 24px 20px 26px !important; }
  div[data-r="revbody"] > div:first-child[style] { padding-left: 16px !important; }
  div[data-r="revbody"] p[style] { font-size: 17.5px !important; line-height: 1.4 !important; max-width: none !important; }
  div[data-r="revbody"] > div:first-child > div:last-child[style] { font-size: 12.5px !important; margin-top: 12px !important; }
  div[data-r="revstats"][style] { gap: 18px !important; margin-top: 22px !important; padding-top: 20px !important; }
  div[data-r="revstats"] span[style] { font-size: 28px !important; }

  div[data-r="revcards"] > div[style] { border-radius: 14px !important; }
  /* the customer photo: full card width, same square crop as desktop */
  div[data-r="revcards"] > div > div:first-child[style] {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background-size: cover !important;
    background-position: center !important;
    flex: 0 0 auto !important;
  }
  div[data-r="revcards"] > div > div:last-child[style] { padding: 16px 16px 18px !important; }
  div[data-r="revcards"] p[style] { font-size: 14px !important; line-height: 1.5 !important; margin-top: 12px !important; }
  div[data-r="revcards"] > div > div:last-child > div:last-child[style] { margin-top: 14px !important; }
}
@media (max-width: 640px) {
  div[data-r="revcards"] > div > div:first-child[style] { aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 1024px) {
  section#fleet > div:last-child[style*="justify-content: center"] { margin-top: 22px !important; }
  section#fleet[style] { padding-bottom: 8px !important; }
}

@media (max-width: 1024px) {
  div[data-r="cdgrid"][style]:not([data-no]):not([data-no2]):not([data-no3]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  div[data-r="cdgrid"] > div[style] { padding: 14px 4px !important; border-radius: 13px !important; }
  div[data-r="cdgrid"] [style*="font-size: 38px"] { font-size: 27px !important; }
}

@media (max-width: 1024px) {
  /* 4 columns, 2 rows, sliding sideways: grid-auto-flow: column fills down then
     across, so cards 1-2 share the first column, 3-4 the second and so on */
  div[data-r="promocards"][style] {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 42% !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    margin: -10px -16px -14px !important;
    padding: 10px 16px 18px !important;
    scroll-padding-left: 16px;
  }
  div[data-r="promocards"]::-webkit-scrollbar { display: none; }
  div[data-r="promocards"] > a { flex: initial !important; scroll-snap-align: start; max-width: none; }
}
@media (max-width: 560px) {
  div[data-r="promocards"][style] { grid-auto-columns: 58% !important; }
}
@media (max-width: 1024px) {
  div[data-r="promocards"] > a[style] { padding: 16px 14px !important; gap: 7px !important; border-radius: 14px !important; }
  div[data-r="promocards"] [style*="font-size: 30px"] { font-size: 24px !important; }
  div[data-r="promocards"] [style*="font-size: 17px"] { font-size: 15px !important; }
  div[data-r="promocards"] [style*="font-size: 12.5px"] { font-size: 12px !important; }
  div[data-r="promocards"] [style*="font-size: 11.5px"] { font-size: 10.5px !important; }
  /* the "view all" box is the last card in the scroll row */
  div[data-r="promocards"] > a[data-r="promocta"][style] { grid-column: auto !important; }
  div[data-r="promocards"] > a[data-r="promocta"] [style*="font-size: 22px"] { font-size: 17px !important; }
}

/* ===== Home: NEXX Electric section, mobile ===== */
@media (max-width: 1024px) {
  /* device keeps its own 2-column grid, so the desktop card width must not leak in.
     The inline style is display: flex, so the grid track declaration is inert
     without display: grid - and the flex-scroller properties need neutralising
     too, the same way the promo row does it. */
}
@media (max-width: 1024px) {
  section#electric[style] { padding: 0 16px !important; margin-top: 54px !important; }
  section#electric > div[style] { padding: 26px 16px 22px !important; border-radius: 22px !important; }
  div[data-r="evhead"][style] { gap: 12px !important; margin-bottom: 20px !important; }
  div[data-r="evhead"] h2[style] { font-size: 28px !important; margin-top: 12px !important; }
  div[data-r="evhead"] > div > div:first-child[style] { font-size: 10.5px !important; padding: 6px 12px !important; }
  div[data-r="evhead"] > p[style] { font-size: 13.5px !important; max-width: none !important; }
}

/* ===== Home: Why NEXX, mobile =====
   Six cards as a 3-col, 2-row grid that slides sideways: grid-auto-flow: column
   fills down then across, so cards 1-2 share the first column, 3-4 the second
   and so on. The row is bled to the screen edges so a card can sit flush. */
@media (max-width: 1024px) {
  div[data-r="whygrid"][style]:not([data-no]):not([data-no2]) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 46% !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 10px 16px 16px !important;
    scroll-padding-left: 16px;
  }
  div[data-r="whygrid"]::-webkit-scrollbar { display: none; }
  div[data-r="whygrid"] > div { scroll-snap-align: start; max-width: none; }
}
@media (max-width: 1024px) {
  section#why[style] { padding: 54px 16px 12px !important; }
  section#why > div:first-child[style] { margin-bottom: 20px !important; }
  section#why h2[style] { font-size: 27px !important; line-height: 1.1 !important; }
  section#why > div:first-child > div[style] { font-size: 11.5px !important; margin-bottom: 10px !important; }
  div[data-r="whygrid"] > div[style] { padding: 16px 14px !important; border-radius: 14px !important; }
  /* scope the icon sizing to the FACE row only: the walkthrough state replaces
     the first child with its own header row, whose first span is the step label */
  div[data-r="whyface"][style] { flex-wrap: nowrap !important; gap: 9px !important; margin-bottom: 7px !important; }
  div[data-r="whyface"] > span[style] { width: 34px !important; height: 34px !important; }
  div[data-r="whystep"][style] { flex-wrap: nowrap !important; }
  /* 44px touch target without changing the glyph's visual size */
  button[data-r="whyclose"][style] { min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: -11px -14px -11px 0 !important; display: inline-flex !important; align-items: center; justify-content: flex-end; }
  /* keep the text link a 44px-tall touch target without moving the text */
  a[data-r="whylink"][style] { min-height: 44px !important; display: inline-flex !important; align-items: center; }
  div[data-r="whygrid"] h3[style] { font-size: 15px !important; }
  div[data-r="whygrid"] p[style] { font-size: 12.5px !important; line-height: 1.5 !important; }
}
@media (max-width: 560px) {
  div[data-r="whygrid"][style]:not([data-no]):not([data-no2]) { grid-auto-columns: 62% !important; }
}

/* ===== Home: How it works, mobile ===== */
@media (max-width: 1024px) {
  section#how[style] { padding: 54px 16px 12px !important; }
  section#how:has([data-r="howsteps"]) > div[style] { gap: 22px !important; }
  section#how:has([data-r="howsteps"]) > div > div:first-child[style] { position: static !important; }
  /* the CTA moves below the step cards: unwrap the left column so the eyebrow,
     heading, button and the step grid all become siblings we can reorder */
  /* scoped to the home page's own step layout: promotion.html has a plain
     #how grid and must not inherit the howleft reorder */
  section#how:has([data-r="howsteps"]) > div[style] { display: flex !important; flex-direction: column !important; }
  [data-r="howleft"] { display: contents !important; }
  section#how:has([data-r="howsteps"]) > div > div:first-child > div[style] { order: 1; }
  section#how:has([data-r="howsteps"]) h2[style] { order: 2; }
  div[data-r="howsteps"] { order: 3; }
  [data-r="howcta"] {
    order: 4;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 18px !important;
    padding: 15px 20px !important;
    font-size: 15px !important;
  }
  section#how h2[style] { font-size: 27px !important; line-height: 1.1 !important; }
  section#how:has([data-r="howsteps"]) > div > div:first-child > div[style] { font-size: 11.5px !important; margin-bottom: 10px !important; }
  section#how a[href*="book.nexxcarrental"][style] { margin-top: 18px !important; padding: 12px 20px !important; font-size: 14px !important; }
  div[data-r="howsteps"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  div[data-r="howstep"][style]:not([data-no]):not([data-no2]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 16px 14px !important;
    border: 1px solid #e4e2db !important;
    border-radius: 14px !important;
    background: #fff !important;
    align-content: start !important;
  }
  div[data-r="howstep"] > span[style] { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  div[data-r="howstep"] h3[style] { font-size: 15px !important; margin-bottom: 5px !important; }
  div[data-r="howstep"] p[style] { font-size: 12.5px !important; line-height: 1.5 !important; }
}

/* ===== Blog list: category filter + section bleed, device =====
   The section keeps its 32px desktop padding, which stacks on top of the
   card row's own 16px inset. Zero the section and pad each child instead, so
   the pill row and cards can run to the screen edges like the home journal. */
@media (max-width: 1024px) {
  section:has(> div[data-r="blogcats"])[style] { padding: 30px 0 0 !important; }
  section:has(> div[data-r="blogcats"]) > a[data-r="featured"] { margin: 0 16px !important; }

  div[data-r="blogcats"][style] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    margin-bottom: 20px !important;
    padding: 2px 16px !important;
    scroll-padding-left: 16px;
  }
  div[data-r="blogcats"]::-webkit-scrollbar { display: none; }
  div[data-r="blogcats"] > button[style] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* two global 1024px rules outrank a plain height/nowrap here: one forces
       white-space: normal on any inline nowrap, the other sets min-height 46px
       on every pill-radius button */
    white-space: nowrap !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 560px) {
  div[data-r="blogcats"] > button[style] { min-height: 38px !important; height: 38px !important; padding: 0 13px !important; font-size: 12.5px !important; }
}

/* ===== Home: journal, mobile ===== */
@media (max-width: 1024px) {
  section#journal[style] { padding: 54px 16px 12px !important; }
  /* the button sits beside the title rather than stacking under it */
  section#journal > div:first-child[style] { margin-bottom: 18px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
  section#journal > div:first-child > div:first-child { min-width: 0; }
  section#journal a[href="blog.html"][style] { flex: 0 0 auto; white-space: nowrap !important; }
  section#journal h2[style] { font-size: 27px !important; line-height: 1.1 !important; }
  section#journal > div:first-child > div > div[style] { font-size: 11.5px !important; margin-bottom: 10px !important; }
  section#journal a[href="blog.html"][style] { padding: 11px 16px !important; font-size: 13px !important; }
  section#journal h2[style] { font-size: 23px !important; }
  /* one swipeable row instead of three full-width stacked cards */
  section#journal[style] { padding-left: 0 !important; padding-right: 0 !important; }
  section#journal > div:first-child[style] { padding: 0 16px !important; }
  div[data-r="blogcards"][style] {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px !important;
    -webkit-overflow-scrolling: touch;
    /* small allowance so overflow-x does not clip the (now capped) hover shadow */
    padding: 6px 16px 18px !important;
    margin-top: 26px !important;
    margin-bottom: -12px !important;
    scrollbar-width: none;
  }
  div[data-r="blogcards"][style]::-webkit-scrollbar { display: none; }
  div[data-r="blogcards"][style] > a { flex: 0 0 78% !important; scroll-snap-align: start; min-width: 0; align-self: flex-start; }
  div[data-r="blogcards"][style] > a > div:first-child { flex: 0 0 auto !important; }
  div[data-r="blogcards"] > a > div:first-child[style] {
    /* iOS collapses aspect-ratio on a stretched flex item, which dropped the
       photo and left the category pill sitting on the title. Pad instead. */
    aspect-ratio: auto !important;
    height: 0 !important;
    padding-top: 56.25% !important;
    background-color: #e7e3da !important;
    box-shadow: inset 0 0 0 1px rgba(17,19,22,0.07) !important;
  }
  div[data-r="blogcards"] > a > div:last-child[style] { padding: 14px 15px 16px !important; }
  div[data-r="blogcards"] [style*="font-size: 19px"] {
    font-size: 16px !important;
    /* titles run 1 to 3 lines, which is what made the cards uneven; clamp them
       so every card has the same text block height */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  div[data-r="blogcards"] > a[style] { align-self: stretch !important; }
  div[data-r="blogcards"] > a > div:last-child[style] { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
  div[data-r="blogcards"] p[style] { flex: 1 1 auto !important; }
  div[data-r="blogcards"] p[style] {
    font-size: 13px !important;
    margin-top: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  div[data-r="blogcards"] > a > div:last-child > div:last-child[style] { margin-top: 12px !important; padding-top: 10px !important; font-size: 11.5px !important; }
}

@media (max-width: 1024px) {
  /* hero price block spans the content width so Book Now lines up with the cards below */
  div[data-r="pricewrap"][style] { width: 100% !important; }
  div[data-r="pricewrap"] > div[style] { width: 100% !important; align-self: stretch !important; }
}

/* ===== Checkbox rows: box centred on the first line of its label ===== */
@media (max-width: 1024px) {
  #reserve label[style*="align-items: flex-start"] > input[type="checkbox"],
  [data-r2="summary"] label[style*="align-items: flex-start"] > input[type="checkbox"] {
    margin-top: 1px !important;
    align-self: flex-start !important;
  }
  #reserve label[style*="align-items: flex-start"] > span,
  [data-r2="summary"] label[style*="align-items: flex-start"] > span { min-width: 0; }
}

/* ===== Booking form sections (no number circles): full width, phone padding (mv) ===== */
@media (max-width: 1024px) {
  #reserve div[style*="gap: 18px"][style*="padding: 26px 28px"] {
    gap: 14px !important;
    padding: 20px 16px !important;
  }
}

/* ===== Booking form: date and time sit side by side (mv) ===== */
@media (max-width: 1024px) {
  #reserve div[data-r="dates4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ===== Booking form: country code and phone stay on one line (mv) ===== */
@media (max-width: 1024px) {
  #reserve label > div[style*="display: flex"][style*="gap: 8px"] { flex-wrap: nowrap !important; }
  #reserve label > div[style*="display: flex"][style*="gap: 8px"] > select { flex: 0 0 auto !important; width: auto !important; }
  #reserve label > div[style*="display: flex"][style*="gap: 8px"] > input { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ===== Booking form: location picker opens under the field it edits (mv) ===== */
@media (max-width: 1024px) {
  #reserve div:has(> [data-nxloc]) { display: flex !important; flex-direction: column; gap: 12px; }
  #reserve [data-r="duo"]:has(~ [data-nxloc]) { display: contents !important; }
  #reserve [data-r="duo"]:has(~ [data-nxloc]) > div:first-child { order: 1; }
  #reserve [data-r="duo"]:has(~ [data-nxloc]) > div:last-child { order: 3; }
  #reserve div:has(> [data-nxloc]) > [data-nxloc="del"] { order: 2 !important; margin-top: 0 !important; }
  #reserve div:has(> [data-nxloc]) > [data-nxloc="ret"] { order: 4 !important; margin-top: 0 !important; }
}

/* ===== Booking form: long select labels stay inside their box (mv) ===== */
@media (max-width: 1024px) {
  #reserve select {
    max-width: 100% !important;
    font-size: 12.5px !important;
    padding-right: 28px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* ===== Booking checkboxes: round box, green tick, always beside its text ===== */
#reserve label[style*="align-items: flex-start"],
[data-r2="summary"] label[style*="align-items: flex-start"] {
  flex-wrap: nowrap !important;
}
#reserve label input[type="checkbox"],
[data-r2="summary"] label input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 19px !important; height: 19px !important;
  min-height: 19px !important; min-width: 19px !important;
  flex: 0 0 auto !important;
  border: 1.5px solid #cfcbc2; border-radius: 50%;
  background: #fff; cursor: pointer; position: relative;
  display: inline-block; vertical-align: top;
  transition: background .16s ease, border-color .16s ease;
}
[data-r2="summary"] label input[type="checkbox"] {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3);
}
#reserve label input[type="checkbox"]::after,
[data-r2="summary"] label input[type="checkbox"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 3.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -70%) rotate(-45deg);
  opacity: 0; transition: opacity .14s ease;
}
#reserve label input[type="checkbox"]:checked,
[data-r2="summary"] label input[type="checkbox"]:checked {
  background: #1faa5a; border-color: #1faa5a;
}
#reserve label input[type="checkbox"]:checked::after,
[data-r2="summary"] label input[type="checkbox"]:checked::after { opacity: 1; }
#reserve label input[type="checkbox"]:focus-visible,
[data-r2="summary"] label input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(31,170,90,0.25);
}

/* ===== Booking form: date / time picker opens under its own pair (mv, tv) ===== */
@media (max-width: 1024px) {
  #reserve div:has(> [data-nxcal]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #reserve div:has(> [data-nxcal]) > * { grid-column: 1 / -1; order: 7; }
  #reserve div:has(> [data-nxcal]) > div:first-child { order: 0; }
  #reserve [data-r="dates4"]:has(~ [data-nxcal]) { display: contents !important; }
  #reserve [data-r="dates4"]:has(~ [data-nxcal]) > div:nth-child(1) { grid-column: auto; order: 1; }
  #reserve [data-r="dates4"]:has(~ [data-nxcal]) > div:nth-child(2) { grid-column: auto; order: 2; }
  #reserve [data-r="dates4"]:has(~ [data-nxcal]) > div:nth-child(3) { grid-column: auto; order: 4; }
  #reserve [data-r="dates4"]:has(~ [data-nxcal]) > div:nth-child(4) { grid-column: auto; order: 5; }
  #reserve div:has(> [data-nxcal]) > [data-nxcal="pickup"] { order: 3 !important; margin-top: 0 !important; }
  #reserve div:has(> [data-nxcal]) > [data-nxcal="return"] { order: 6 !important; margin-top: 0 !important; }
}

/* ===== Summary drawer: close button sits inline in the title row ===== */
#reserve [data-r="sumwrap"] [data-r2="summary"] { position: relative; padding-top: 20px !important; }
#reserve [data-r="sumwrap"] [data-r="sumclose"] {
  position: static !important; z-index: 3;
}

/* ===== Chat launcher steps aside for the booking + summary drawers ===== */
html:has(#reserve[data-drawer="1"]) nexx-chat,
html:has(#reserve [data-r="sumwrap"][data-open="1"]) nexx-chat { display: none !important; }

/* ===== Booking drawer close button is a round X at every width ===== */
#reserve [data-r="bkclose"] {
  width: 38px !important; padding: 0 !important;
  justify-content: center; gap: 0 !important;
  border-radius: 50% !important; font-size: 0 !important;
}
#reserve [data-r="bkclose"] > span { font-size: 15px; line-height: 1; }

/* ===== Nav menu open: the sticky booking bar stands down ===== */
html[data-nx-menu] [data-r="sbar"],
html[data-nx-menu] [data-r="bksticky"],
html[data-nx-menu] nexx-chat { display: none !important; }


/* ===== Rates price list: accordion cards on phone + tablet ===== */
@media (max-width: 1024px) {
  #pricelist [data-r="ratestable"] { display: none !important; }
  #pricelist [data-r="ratescards"] { display: flex !important; }
}
@media (max-width: 560px) {
  #pricelist [data-r="ratescards"] [data-keep-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #pricelist [data-r="ratescards"] button[style] { padding: 11px !important; gap: 9px !important; }
}


/* ===== CDW / LDW excess table: compact 2-column rows on phone + tablet ===== */
@media (max-width: 1024px) {
  #cdw { margin-top: 20px !important; }
  #cdw [data-r="cdwcta"] { gap: 16px !important; }
  #cdw [data-r="cdwcta"] > div:first-child { padding: 22px 16px !important; }
  #cdw [data-r="cdwcta"] > div:first-child h3[style] { font-size: 20px !important; }
  #cdw [data-r="cdwcta"] > div:first-child p[style] { font-size: 13.5px !important; }
  #cdw [data-r="cdwtbl"] {
    overflow-x: hidden !important; overflow-y: auto !important;
    max-height: 330px !important;
    -webkit-overflow-scrolling: touch;
  }
  #cdw [data-r="cdwtblin"] { min-width: 0 !important; }
  #cdw [data-r="cdwtblin"] > div:first-child { display: none !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2px 12px !important;
    padding: 11px 14px !important;
    align-items: baseline !important;
  }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(1) { grid-area: 1 / 1 !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(2) { grid-area: 2 / 1 !important; font-size: 12.5px !important; color: #9a948a !important; font-weight: 500 !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(3) { grid-area: 3 / 1 !important; font-size: 12.5px !important; color: #6b6f76 !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(4) { grid-area: 2 / 2 !important; font-size: 12.5px !important; text-align: right !important; color: #6b6f76 !important; font-weight: 600 !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(5) { grid-area: 1 / 2 !important; font-size: 15px !important; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(3)::before { content: "Excess "; color: #a09a8e; }
  #cdw [data-r="cdwtblin"] > div:not(:first-child) > div:nth-child(4)::before { content: "CDW "; color: #a09a8e; font-weight: 500; }
}

@media (max-width: 1024px) {
  #cdw [data-r="cdwbtns"] { flex-wrap: nowrap !important; gap: 10px !important; margin-top: 26px !important; }
  #cdw [data-r="cdwbtns"] > a[style] {
    flex: 1 1 0 !important; min-width: 0 !important;
    justify-content: center !important; text-align: center !important;
    padding: 15px 14px !important; font-size: 14.5px !important;
    white-space: nowrap !important;
  }
  #cdw [data-r="cdwbtns"] > a[style] > span { font-size: 16px !important; }
}


/* ===== Rates: short-term package cards, one sliding row on phone + tablet ===== */
@media (max-width: 1024px) {
  #packages [data-r="pkggrid"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    margin: 0 -16px !important;
    padding: 0 16px 4px !important;
    scroll-padding-left: 16px;
  }
  #packages [data-r="pkggrid"]::-webkit-scrollbar { display: none; }
  #packages [data-r="pkggrid"] > div[style] {
    flex: 0 0 260px;
    max-width: none;
    scroll-snap-align: start;
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }
  /* child 1 is the icon span, so the text rows start at 2: label, days,
     discount row (figure + flash pill), body, delivery */
  /* the inline background-size is pinned at 46px, so shrinking the box alone
     crops the artwork instead of scaling it */
  #packages [data-r="pkggrid"] span[data-r="pkicon"][style] {
    width: 36px !important;
    height: 36px !important;
    background-size: contain !important;
    background-position: center !important;
    margin-bottom: 9px !important;
  }
  #packages [data-r="pkggrid"] > div[style] > div:nth-child(2) { font-size: 11px !important; }
  #packages [data-r="pkggrid"] > div[style] > div:nth-child(3) { font-size: 26px !important; }
  #packages [data-r="pkggrid"] > div[style] > div:nth-child(4) > span:first-child { font-size: 16px !important; }
  #packages [data-r="pkggrid"] > div[style] > div:nth-child(5) { font-size: 12.5px !important; }
  #packages [data-r="pkggrid"] > div[style] > div:last-child { margin-top: 14px !important; padding-top: 11px !important; gap: 8px !important; }
  #packages [data-r="pkggrid"] > div[style] > div:last-child > span { font-size: 11px !important; }
  #packages h2[style] { font-size: 28px !important; }
}
@media (max-width: 560px) {
  #packages [data-r="pkggrid"] > div[style] { flex-basis: 232px; }
}


/* ===== Rates: delivery section, 2-up on phone + tablet ===== */
@media (max-width: 1024px) {
  #delivery { padding-top: 56px !important; }
  #delivery h2[style] { font-size: 28px !important; }
  #delivery [data-r="delvinfo"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; }
  #delivery [data-r="delvinfo"] > div[style] { min-width: 0 !important; padding: 16px 14px !important; }
  #delivery [data-r="delvinfo"] > div[style] > div:nth-child(1) { font-size: 10.5px !important; margin-bottom: 7px !important; }
  #delivery [data-r="delvinfo"] [style*="font-size: 24px"] { font-size: 19px !important; }
  #delivery [data-r="delvinfo"] > div[style] > div:last-child { font-size: 12px !important; }
  #delivery [data-r="delvhubs"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* delivery tiers: one sideways-scrolling row */
  #delivery [data-r="delvtiers"][style] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 0 20px 4px !important;
  }
  #delivery [data-r="delvtiers"]::-webkit-scrollbar { display: none; }
  #delivery [data-r="delvtiers"] > div[style] {
    flex: 0 0 76% !important;
    max-width: 320px;
    scroll-snap-align: start;
    padding: 18px 16px !important;
  }
  #delivery [data-r="delvtiers"] [style*="font-size: 28px"] { font-size: 23px !important; }
  #delivery [data-r="delvhubs"] > div[style] { padding: 15px 14px !important; }
}
@media (max-width: 560px) {
  #delivery [data-r="delvtiers"] > div[style] > div:last-child { gap: 6px !important; }
  #delivery [data-r="delvtiers"][style] { margin-left: -18px !important; margin-right: -18px !important; padding: 0 18px 4px !important; scroll-padding-left: 18px !important; }
  #delivery [data-r="delvtiers"] > div[style] { flex: 0 0 82% !important; }
}


/* ===== About: owner-operated CTA, phone + tablet ===== */
@media (max-width: 1024px) {
  section:has(> [data-r="aboutcta"]) { margin-top: 56px !important; padding: 0 20px !important; }
  [data-r="aboutcta"][style] {
    grid-template-columns: 1fr !important;
    /* single column here, so the scrim runs top-to-bottom and stays dark behind
       the white headline and lede, opening up over the photo at the foot */
    background-image: linear-gradient(180deg, rgba(17,19,22,0.90) 0%, rgba(17,19,22,0.80) 54%, rgba(17,19,22,0.46) 100%), url('uploads/about-cta-key-handover.png') !important;
    background-position: center, center 30% !important;
    gap: 22px !important;
    padding: 32px 22px !important;
    border-radius: 20px !important;
  }
  [data-r="aboutcta"] h2[style] { font-size: 30px !important; margin-top: 14px !important; }
  [data-r="aboutcta"] p[style] { font-size: 15px !important; margin-top: 12px !important; max-width: none !important; }
}
@media (max-width: 560px) {
  section:has(> [data-r="aboutcta"]) { padding: 0 18px !important; }
  [data-r="aboutcta"][style] { padding: 28px 18px !important; }
  [data-r="aboutcta"] h2[style] { font-size: 27px !important; }
}

/* ===== About: pillars - one sideways row on phone + tablet ===== */
@media (max-width: 1024px) {
  /* the intro section sits directly above the pillar cards, so it takes the
     same side padding and its text lines up with the card edges */
  [data-r="abintrosec"][style] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="pillsec"][style] { padding: 56px 20px 0 !important; }
  [data-r="pillgrid"][style] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 0 20px 4px !important;
  }
  [data-r="pillgrid"]::-webkit-scrollbar { display: none; }
  [data-r="pillgrid"] > div[style] {
    flex: 0 0 76% !important;
    max-width: 330px;
    scroll-snap-align: start;
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  [data-r="pillgrid"] > div > div:first-child[style] { width: 38px !important; height: 38px !important; font-size: 17px !important; margin-bottom: 14px !important; }
  [data-r="pillgrid"] h3[style] { font-size: 16.5px !important; }
  [data-r="pillgrid"] p[style] { font-size: 13.5px !important; line-height: 1.5 !important; }
}
@media (max-width: 560px) {
  [data-r="abintrosec"][style] { padding-left: 18px !important; padding-right: 18px !important; }
  [data-r="pillsec"][style] { padding: 48px 18px 0 !important; }
  [data-r="pillgrid"][style] { margin-left: -18px !important; margin-right: -18px !important; padding: 0 18px 4px !important; scroll-padding-left: 18px !important; }
  [data-r="pillgrid"] > div[style] { flex: 0 0 82% !important; }
}

/* ===== About: "Other services we offer" - full-bleed auto-playing marquee =====
   The section is now full-bleed with its own heading wrapper, and the track is
   animated (see the nxSvcMarquee block above), so the old manual scroller rules
   are gone - a scroll container and an animated track fight each other. */
@media (max-width: 1024px) {
  [data-r="svcsec"][style] { padding: 56px 0 0 !important; }
  [data-r="svchead"][style] { margin-bottom: 20px !important; padding: 0 20px !important; }
  [data-r="svchead"] > div[style] { font-size: 11.5px !important; margin-bottom: 10px !important; }
  [data-r="svcsec"] h2[style] { font-size: 28px !important; }
  div[data-r="svcgrid"] > div[style] { box-shadow: none !important; }
  [data-r="svcgrid"] > div > div:last-child[style] { padding: 16px 16px 18px !important; }
  [data-r="svcgrid"] h3[style] { font-size: 16.5px !important; }
  [data-r="svcgrid"] p[style] { font-size: 13.5px !important; line-height: 1.5 !important; }
}
@media (max-width: 560px) {
  [data-r="svchead"][style] { padding: 0 18px !important; }
  div[data-r="svcgrid"] > div { flex-basis: 240px !important; }
}

/* ===== Car rental: "How to book" card, compact on phone + tablet ===== */
@media (max-width: 1024px) {
  #cdw [data-r="howbook"] { padding: 20px 16px !important; border-radius: 14px !important; box-shadow: 0 16px 36px -26px rgba(17,19,22,0.4) !important; }
  #cdw [data-r="howbook"] > div:first-child { margin-bottom: 14px !important; font-size: 11px !important; }
  #cdw [data-r="howbook"] > div:nth-child(2) { gap: 13px !important; }
  #cdw [data-r="howbook"] > div:nth-child(2) > div[style] { gap: 11px !important; flex-wrap: nowrap !important; }
  #cdw [data-r="howbook"] > div:nth-child(2) > div[style] > div:first-child { width: 24px !important; height: 24px !important; border-radius: 7px !important; font-size: 12.5px !important; }
  #cdw [data-r="howbook"] > div:nth-child(2) > div[style] > div:last-child > div:first-child { font-size: 13.5px !important; }
  #cdw [data-r="howbook"] > div:nth-child(2) > div[style] > div:last-child > div:last-child { font-size: 12.5px !important; }
  #cdw [data-r="howbook"] > div:last-child { margin-top: 16px !important; padding-top: 14px !important; font-size: 12.5px !important; }
}
@media (min-width: 700px) and (max-width: 1024px) {
  #cdw [data-r="howbook"] > div:nth-child(2) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
}

@media (max-width: 640px) {
  #cdw [data-r="cdwbtns"] { gap: 8px !important; }
  #cdw [data-r="cdwbtns"] > a[style] {
    white-space: normal !important;
    font-size: 13px !important;
    padding: 13px 10px !important;
    line-height: 1.25 !important;
    gap: 6px !important;
  }
  #cdw [data-r="cdwbtns"] > a[style] > span { font-size: 14px !important; }
}


/* ===== Fleet cards: trim pills stay on one line, at every width =====
   A wrapped second row of pills makes the card taller and stretches every
   other card in the same grid row. Scroll the row instead, bled out to the
   card body's side padding so an overflowing pill clips at the card border.
   --trimbleed tracks the card padding, which mobile.css reduces below. */
[data-r="cardbody"] { --trimbleed: 13px; }
[data-r="cardbody"] > [data-r="trims"] {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: calc(-1 * var(--trimbleed));
  margin-right: calc(-1 * var(--trimbleed));
  padding-left: var(--trimbleed);
  padding-right: var(--trimbleed);
  scroll-padding-left: var(--trimbleed);
  /* the page's global `* { max-width: 100% }` reset caps the row at the
     content width, which shifts it left instead of widening it */
  max-width: none;
}
[data-r="cardbody"] > [data-r="trims"]::-webkit-scrollbar { display: none; }
[data-r="cardbody"] > [data-r="trims"] > * { flex: 0 0 auto; scroll-snap-align: start; max-width: none; }

/* ===== Shared page hero: device treatment (same language as the terms hero) =====
   One teal hairline marks the block, the headline tightens, the eyebrow becomes a
   micro-label, and the lede sits on a 42-character measure. Scoped to the hero so
   each page's own body rules are untouched. */
@media (max-width: 1024px) {
  /* the authored scrims are horizontally weighted for a desktop-width photo, so at
     this width the headline lands on the bright end. One uniform wash fixes every
     page at once; it paints before the content wrapper, which is positioned. */
  header[data-r="nxhero"]::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,12,15,0.6) 0%, rgba(10,12,15,0.48) 55%, rgba(10,12,15,0.42) 100%);
  }
  header[data-r="nxhero"][style] { padding: 101px 20px 38px !important; }
  header[data-r="nxhero"] [data-r="nxheroin"] { padding-left: 16px; border-left: 2px solid var(--nx-hero-accent, #4ECEC4); }

  header[data-r="nxhero"] h1[style] {
    font-size: 36px !important; line-height: 0.98 !important;
    letter-spacing: -0.035em !important; max-width: 100% !important;
  }
  header[data-r="nxhero"] [data-r="nxlede"][style],
  header[data-r="nxhero"] [data-r="clssub"][style],
  header[data-r="nxhero"] [data-r="plede"][style] {
    font-size: 14.5px !important; line-height: 1.6 !important;
    margin-top: 14px !important; max-width: 42ch !important;
    /* alpha-muted ink cannot hold contrast over a photo */
    color: rgba(255,255,255,0.92) !important;
  }
  /* same for the translucent chip rows under the lede */
  header[data-r="nxhero"] [style*="rgba(255,255,255,0.07)"],
  header[data-r="nxhero"] [style*="rgba(255,255,255,0.08)"] {
    background: rgba(255,255,255,0.16) !important; color: #fff !important;
  }
  /* bordered chip -> plain teal micro-label: at this width the border just steals
     room from the headline */
  /* keep the hero lede to two lines on device: the pre-existing clssub clamp was
     tuned to the authored 19px/600px, so re-clamp it at the hero's measure */
  header[data-r="nxhero"] [data-r="clssub"][style] {
    display: -webkit-box !important; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important; overflow: hidden !important;
    max-width: 52ch !important;
  }
  header[data-r="nxhero"] [data-r="nxeyebrow"][style] {
    border: 0 !important; padding: 0 !important; margin-bottom: 14px !important; gap: 8px !important;
  }
  header[data-r="nxhero"] [data-r="nxeyebrow"] > span:last-child {
    font-size: 10.5px !important; font-weight: 700 !important;
    letter-spacing: 0.14em; text-transform: uppercase; color: #4ECEC4 !important;
  }
  header[data-r="nxhero"] [data-r="nxeyebrow"] > span:first-child { width: 5px !important; height: 5px !important; }
}
@media (max-width: 560px) {
  header[data-r="nxhero"][style] { padding: 97px 18px 34px !important; }
  header[data-r="nxhero"] [data-r="nxheroin"] { padding-left: 14px; }
  header[data-r="nxhero"] h1[style] { font-size: 31px !important; }
  header[data-r="nxhero"] [data-r="nxlede"][style],
  header[data-r="nxhero"] [data-r="clssub"][style],
  header[data-r="nxhero"] [data-r="plede"][style] { font-size: 14px !important; }
}

/* ===== Rates hero: device treatment (matches the terms hero) ===== */
@media (max-width: 1024px) {
  [data-r="rtshero"][style] { padding: 101px 20px 38px !important; }
  /* teal hairline marks the block, as on terms */
  [data-r="rtsheroin"][style] { padding-left: 16px; border-left: 2px solid #4ECEC4; }
  [data-r="rtsh1"][style] { font-size: 36px !important; line-height: 0.98 !important; letter-spacing: -0.035em !important; max-width: 100% !important; }
  [data-r="rtslede"][style] { font-size: 14.5px !important; line-height: 1.6 !important; margin-top: 14px !important; max-width: 42ch !important; }
  [data-r="rtshcta"][style] { gap: 8px !important; margin-top: 20px !important; flex-wrap: wrap !important; }
  [data-r="rtshcta"] > a[style] { font-size: 13px !important; padding: 10px 16px !important; min-height: 40px; }
  /* the photo is a right-weighted gradient on desktop; on a narrow screen the
     text sits over the bright end, so darken it uniformly */
  [data-r="rtshero"] > div:nth-child(2)[style] { background: linear-gradient(180deg, rgba(17,19,22,0.92) 0%, rgba(17,19,22,0.78) 60%, rgba(17,19,22,0.68) 100%) !important; }
}
@media (max-width: 560px) {
  [data-r="rtshero"][style] { padding: 97px 18px 34px !important; }
  [data-r="rtsheroin"][style] { padding-left: 14px; }
  [data-r="rtsh1"][style] { font-size: 31px !important; }
  [data-r="rtslede"][style] { font-size: 14px !important; }
  [data-r="rtshcta"] > a[style] { flex: 1 1 auto; justify-content: center; }
}

/* ===== Terms & conditions, phone + tablet ===== */
@media (max-width: 1024px) {
  /* nexx-nav is fixed at 77px tall, so the hero must clear it */
  [data-r="tchero"][style] { padding: 101px 20px 36px !important; }
  /* a teal hairline runs down the left of the whole block, so the hero reads as
     one marked-up clause rather than a shrunken desktop banner. Scoped to the
     CONTENT div: the first child is an absolutely positioned glow overlay, and
     a border on that draws a second line down the full height of the photo. */
  [data-r="tchero"] > div:last-child[style] { padding-left: 16px; border-left: 2px solid #4ECEC4; }
  /* the pill becomes a plain micro-label: a bordered chip at this size just
     steals width from the headline */
  [data-r="tceyebrow"][style] {
    border: 0 !important; padding: 0 !important; margin-bottom: 14px !important; gap: 8px !important;
  }
  [data-r="tceyebrow"] > span:last-child[style] {
    font-size: 10.5px !important; font-weight: 700 !important;
    letter-spacing: 0.14em; text-transform: uppercase; color: #4ECEC4 !important;
  }
  [data-r="tceyebrow"] > span:first-child[style] { width: 5px !important; height: 5px !important; }
  [data-r="tch1"][style] { font-size: 38px !important; line-height: 0.98 !important; letter-spacing: -0.035em !important; }
  [data-r="tclede"][style] { font-size: 14.5px !important; line-height: 1.6 !important; margin-top: 14px !important; max-width: 42ch !important; }
  [data-r="tchero"] p[style] { margin-top: 16px !important; }

  [data-r="tcsec"][style] { padding: 28px 20px 0 !important; }
  /* block, not a 1fr grid: a grid item's containing block is its own row, which
     for the rail would be exactly its 56px height, leaving sticky no travel */
  [data-r="tcgrid"][style] { display: block !important; }
  [data-r="tcbody"][style] { gap: 40px !important; }

  /* the side nav becomes a pinned chip rail above the content */
  /* the rail stays put: pinning it under the nav made it follow the page.
     11 chips also wrap into a tidy cloud rather than a scroll strip, so every
     section is reachable without swiping sideways. */
  [data-r="tctoc"][style] {
    position: static !important;
    flex-direction: row !important; flex-wrap: wrap !important;
    overflow: visible;
    gap: 7px !important;
    margin: 0 0 24px !important; padding: 0 !important;
    background: transparent;
  }
  [data-r="tctoc"]::-webkit-scrollbar { display: none; }
  [data-r="tctoc"][style] { margin-bottom: 20px !important; gap: 6px !important; }
  [data-r="tctoc"] > a[style] { font-size: 12px !important; padding: 7px 11px !important; }
  [data-r="tctoc"] > a[style] {
    flex: 0 0 auto; white-space: nowrap;
    font-size: 12.5px !important; padding: 7px 12px !important;
    background: #fff; border: 1px solid #ece9e1; border-radius: 100px !important;
    min-height: 34px; display: inline-flex; align-items: center;
  }
  [data-r="tctoc"] > a:last-child[style] { margin-top: 0 !important; background: #fff; border-color: #ece9e1; font-weight: 600 !important; }
  [data-r="tctoc"] > a:nth-last-child(2)[style] { margin-top: 0 !important; background: #4ECEC4; border-color: #4ECEC4; font-weight: 600 !important; }

  [data-r="tcbody"] h2[style] { font-size: 23px !important; margin-bottom: 14px !important; }
  /* just the fixed nav now that the rail no longer pins */
  [data-r="tcbody"] > div[id] { scroll-margin-top: 93px !important; }
  [data-r="tcbody"] > div > p[style] { font-size: 14.5px !important; margin-bottom: 16px !important; }
  [data-r="tcbody"] h3[style] { font-size: 15px !important; }
  [data-r="tcbody"] [style*="border-radius: 16px"][style*="padding: 26px"] { padding: 18px 16px !important; }

  [data-r="tcduo"][style] { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* requirements: the two document cards read as one list, so pull them into a
     single bordered stack instead of two separate boxes with doubled padding */
  #requirements [data-r="tcduo"][style] {
    gap: 0 !important;
    background: #fff; border: 1px solid #ece9e1; border-radius: 16px; overflow: hidden;
  }
  #requirements [data-r="tcduo"] > div[style] {
    border: 0 !important; border-radius: 0 !important;
    padding: 16px !important; background: transparent !important;
  }
  #requirements [data-r="tcduo"] > div + div[style] { border-top: 1px solid #f0ede5 !important; }
  #requirements [data-r="tcduo"] h3[style] {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.08em; text-transform: uppercase; color: #9a948a;
    margin-bottom: 11px !important;
  }
  #requirements [data-r="tcduo"] [style*="gap: 10px"][style*="flex-direction"] { gap: 8px !important; }
  #requirements [data-r="tcduo"] [style*="font-size: 14px"] { font-size: 13.5px !important; line-height: 1.4 !important; }
  /* the global mobile flex-wrap rule pushes the text node under the tick */
  #requirements [data-r="tcduo"] [style*="align-items: flex-start"][style*="gap: 10px"] { flex-wrap: nowrap !important; }
  #requirements [data-r="tcduo"] [style*="align-items: flex-start"] > span[style*="#4ECEC4"] { flex: 0 0 auto; }
  #requirements [data-r="tcduo"] [style*="align-items: flex-start"] > svg { flex: 0 0 auto; }
  #requirements [data-r="tcduo"] [style*="align-items: flex-start"] > .sc-interp,
  #requirements [data-r="tcduo"] [style*="align-items: flex-start"] > div { min-width: 0; flex: 1 1 auto; }
  #requirements [data-r="tcduo"] p[style] { font-size: 12px !important; margin-top: 11px !important; }
  #requirements [style*="#fbecea"] { padding: 14px 15px !important; gap: 10px !important; margin-top: 12px !important; }
  #requirements [style*="#fbecea"] p[style] { font-size: 12.5px !important; }

  /* promotion terms accordions */
  [data-r="tcacc"] > details[style] { border-radius: 14px !important; }
  [data-r="tcacc"] > details > summary[style] { padding: 14px 16px !important; gap: 9px !important; }
  [data-r="tcacc"] > details > summary > span:first-child[style] { font-size: 14.5px !important; }
  [data-r="tcacc"] > details > div[style] { padding: 12px 16px 14px !important; }
  [data-r="tcacc"] [style*="font-size: 14px"] { font-size: 13.5px !important; }
  [data-r="tcacc"] [style*="font-size: 13.5px"][style*="line-height"] { font-size: 13px !important; }
  /* cancellation tiers: one sideways-scrolling row of short cards */
  [data-r="tctrio"][style] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    max-width: none;
    margin: 0 -20px !important;
    padding: 2px 20px 4px !important;
    scroll-padding-left: 20px;
  }
  [data-r="tctrio"]::-webkit-scrollbar { display: none; }
  [data-r="tctrio"] > div[style] {
    flex: 0 0 68%; max-width: 280px; scroll-snap-align: start;
    padding: 14px 15px !important; border-radius: 14px !important;
  }
  [data-r="tctrio"] [style*="font-size: 22px"] { font-size: 18px !important; }
  [data-r="tctrio"] [style*="font-size: 14px"] { font-size: 13px !important; margin-top: 7px !important; line-height: 1.45 !important; }
  /* one sliding row, same treatment as tctrio above: two columns made each
     deposit tier a cramped box */
  [data-r="tcquad"][style] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    max-width: none;
    margin: 0 -20px !important;
    padding: 2px 20px 4px !important;
    scroll-padding-left: 20px;
  }
  [data-r="tcquad"]::-webkit-scrollbar { display: none; }
  [data-r="tcquad"] > div[style] { flex: 0 0 56%; max-width: 230px; scroll-snap-align: start; padding: 16px 14px !important; }
  [data-r="tcquad"] [style*="font-size: 26px"] { font-size: 21px !important; }

  /* excess table: one card per row instead of five columns */
  [data-r="tcxhead"][style] { display: none !important; }
  [data-r="tcxbtn"][style] {
    grid-template-columns: 1fr auto !important;
    gap: 4px 10px !important; padding: 13px 16px !important;
  }
  /* every child is pinned to an explicit cell: an item with a definite row but
     an auto column is placed BEFORE the fully auto-placed ones, so the chevron
     would claim column 1 and push the label into column 2 */
  [data-r="tcxbtn"] > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  [data-r="tcxbtn"] > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12.5px !important; }
  [data-r="tcxbtn"] > span:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12.5px !important; }
  /* the 4th cell used to be empty, so hiding it was free. It now carries the
     collapsed CDW/LDW range, so it gets its own line under the price range. */
  [data-r="tcxbtn"] > span:nth-child(4) { grid-column: 1; grid-row: 4; font-size: 12.5px !important; text-align: left !important; }
  [data-r="tcxbtn"] > span:last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  [data-r="tcxrow"][style] {
    grid-template-columns: 1fr auto !important;
    gap: 3px 12px !important; padding: 12px 16px !important;
  }
  [data-r="tcxrow"] > div:first-child { display: none; }
  [data-r="tcxrow"] > div:nth-child(2) { grid-column: 1 / -1; font-size: 13.5px !important; }
  [data-r="tcxrow"] > div:nth-child(3),
  [data-r="tcxrow"] > div:nth-child(4),
  [data-r="tcxrow"] > div:nth-child(5) {
    grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px !important; text-align: left !important;
  }
  [data-r="tcxrow"] > div:nth-child(3)::before { content: "Standard excess"; color: #9a948a; font-weight: 500; }
  [data-r="tcxrow"] > div:nth-child(4)::before { content: "CDW / LDW"; color: #9a948a; font-weight: 500; }
  [data-r="tcxrow"] > div:nth-child(5)::before { content: "Reduced to"; color: #9a948a; font-weight: 500; }

  /* repairs + mileage rows */
  [data-r="tcbody"] [style*="padding: 15px 26px"] { padding: 13px 16px !important; }
  [data-r="tcmrow"][style] { grid-template-columns: 1fr !important; gap: 4px !important; padding: 15px 16px !important; }
  [data-r="tcmrow"] > div:last-child[style] { text-align: left !important; }
  [data-r="tcbody"] [style*="padding: 18px 22px"] { padding: 14px 16px !important; }
  [data-r="tcbody"] [style*="padding: 22px 26px"] { padding: 16px !important; }
}
@media (max-width: 560px) {
  [data-r="tchero"][style] { padding: 97px 18px 32px !important; }
  [data-r="tchero"] > div:last-child[style] { padding-left: 14px; }
  [data-r="tch1"][style] { font-size: 32px !important; }
  [data-r="tclede"][style] { font-size: 14px !important; }
  [data-r="tcsec"][style] { padding: 24px 18px 0 !important; }
  [data-r="tcbody"] h2[style] { font-size: 21px !important; }
  [data-r="tcquad"][style] { gap: 10px !important; margin: 0 -18px !important; padding: 2px 18px 4px !important; scroll-padding-left: 18px; }
  [data-r="tctrio"][style] { margin: 0 -18px !important; padding: 2px 18px 4px !important; scroll-padding-left: 18px; }
  [data-r="tctrio"] > div[style] { flex: 0 0 74%; }
  [data-r="tcquad"] > div[style] { flex-basis: 64% !important; padding: 14px 12px !important; }
  [data-r="tcquad"] [style*="font-size: 26px"] { font-size: 19px !important; }
}

/* ===== Car rental: self pick-up chips, compact on phone + tablet ===== */
@media (min-width: 1025px) {
  /* desktop keeps the plain underlined link; the chip is device-only */
  #cdw [data-r="hubchips"] > a[data-r="delivcta"] { display: none !important; }
}
@media (max-width: 1024px) {
  #cdw [data-r="delivlink"] { display: none !important; }
  #cdw [data-r="hubchips"] { gap: 8px !important; }
  #cdw [data-r="hubchips"] > div[style], #cdw [data-r="hubchips"] > a[style] { padding: 10px 11px !important; gap: 9px !important; flex-wrap: nowrap !important; border-radius: 11px !important; }
  #cdw [data-r="hubchips"] > div[style] > div:first-child, #cdw [data-r="hubchips"] > a[style] > div:first-child { width: 22px !important; height: 22px !important; border-radius: 7px !important; font-size: 11px !important; }
  #cdw [data-r="hubchips"] > div[style] > div:last-child > div:first-child,
  #cdw [data-r="hubchips"] > a[style] > div:last-child > div:first-child {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    font-size: 13px !important; line-height: 1.25 !important;
  }
  #cdw [data-r="hubchips"] > div[style] > div:last-child > div:last-child,
  #cdw [data-r="hubchips"] > a[style] > div:last-child > div:last-child { font-size: 11px !important; }
}
@media (max-width: 619px) {
  /* only one 180px track fits, so a forced column 2 would collapse the grid */
  #cdw [data-r="hubchips"] > a[data-r="delivcta"][style] { grid-column: auto !important; }
}
@media (min-width: 620px) and (max-width: 1024px) {
  #cdw [data-r="hubchips"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}


/* ===== Footer contact buttons: side by side, content width ===== */
@media (max-width: 1024px) {
  /* the brand block is a full-width row now that the footer is single-column,
     so a grid stretched each pill across the whole footer; flex lets them hug
     their text and wrap only when they genuinely do not fit */
  footer div:has(> a[href^="tel:"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  footer div:has(> a[href^="tel:"]) > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    border-radius: 100px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 1024px) {
  /* the pair reads as one control strip, capped so it tracks the blurb above
     rather than running the full width of the footer */
  footer div:has(> a[href^="tel:"]) { max-width: 420px !important; }
}


/* ===== Delivery page: CTA pair, 2-up on phone + tablet ===== */
@media (max-width: 1024px) {
  [data-r="dlvbtns"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 22px !important; }
  [data-r="dlvbtns"] > a[style] {
    justify-content: center !important; text-align: center !important;
    padding: 14px 12px !important; font-size: 14px !important;
    line-height: 1.25 !important; white-space: normal !important;
    gap: 6px !important; box-sizing: border-box !important;
  }
  [data-r="dlvbtns"] > a[style] > span { font-size: 15px !important; }
}

/* ===== Fleet card text block: fit the narrow 2-up card on phone + tablet ===== */
@media (max-width: 1024px) {
  [data-r="cardbody"] { padding: 10px 11px 11px !important; --trimbleed: 11px; }
  /* the global flex-wrap rule above catches this row, dropping the price
     below long names - keep name and price side by side */
  [data-r="cardtop"] {
    flex-wrap: nowrap !important;
    /* top-align so the brand/model always starts at the same height whatever the
       price column holds (flash pill, slashed price, nothing) - with flex-end a
       flash card sat lower than its non-flash neighbour */
    align-items: flex-start !important;
  }
  [data-r="cardleft"] { min-width: 0 !important; flex: 1 1 auto !important; }
  [data-r="cardprice"] { flex: 0 0 auto !important; }
  /* name: allow 2 lines instead of one clipped line */
  [data-r="cardname"] > div:last-child {
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  /* km line: wrap rather than clip */
  [data-r="cardkm"] { white-space: normal !important; line-height: 1.35 !important; }
  [data-r="cardprice"] { text-align: right !important; }
}
@media (max-width: 600px) {
  [data-r="cardbody"] { padding: 9px 10px 10px !important; --trimbleed: 10px; }
  [data-r="cardname"] { font-size: 13.5px !important; }
  [data-r="cardname"] > div:first-child { font-size: 10.5px !important; }
  [data-r="cardbodytype"] { font-size: 10.5px !important; }
  /* brand line shrinks on phones, so match the price offset to it */
  [data-r="cardprice"] { margin-top: 13px !important; }
  [data-r="cardkm"] { font-size: 9.5px !important; }
  [data-r="cardprice"] > div[style*="font-size: 15px"] { font-size: 14px !important; }
}

/* ===== "Compare the range" related-car cards: tighter image on phone + tablet ===== */
@media (max-width: 1024px) {
  [data-r="reltrack"] { gap: 12px !important; }
  [data-r="reltrack"] > a[style] { flex: 0 0 232px !important; border-radius: 14px !important; }
  [data-r="relimg"] {
    aspect-ratio: 16 / 9 !important;
    background-size: auto 108% !important;
    background-position: center 56% !important;
  }
  [data-r="reltrack"] > a[style] > div:last-child { padding: 12px 13px 13px !important; }
}
@media (max-width: 600px) {
  [data-r="reltrack"] > a[style] { flex: 0 0 196px !important; }
  [data-r="relimg"] { aspect-ratio: 16 / 8.6 !important; background-size: auto 112% !important; }
  [data-r="reltrack"] > a[style] > div:last-child { padding: 10px 11px 12px !important; }
  [data-r="reltrack"] > a[style] div[style*="font-size: 17px"] { font-size: 15px !important; }
  [data-r="reltrack"] > a[style] span[style*="font-size: 18px"] { font-size: 16px !important; }
}

/* ===== Fleet filter dropdowns: let the panels escape the sidebar on phone + tablet =====
   The sidebar keeps its desktop max-height + overflow-y:auto, which clips the
   absolutely-positioned dropdown panels so the options can't be seen or tapped. */
@media (max-width: 1024px) {
  [data-r="fleetside"] {
    max-height: none !important;
    overflow: visible !important;
  }
  [data-r="fleetgrp"] { position: relative; z-index: 1; }
  /* the open group must sit above its neighbours */
  [data-r="fleetgrp"]:focus-within { z-index: 60; }
  [data-r="fleetside"] [data-dd="1"] > div[role="listbox"] {
    min-width: 190px;
    max-height: 60vh !important;
  }
}

/* ===== Flash pill + slashed price: stacked, tucked right above the price ===== */
@media (max-width: 1024px) {
  [data-r="cardflash"] {
    /* the pill sits ABOVE the slashed price at every width, never beside it */
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    margin-bottom: 1px !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  [data-r="cardflash"] > span[style] {
    font-size: 8.5px !important;
    padding: 3px 6px !important;
    gap: 3px !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }
  [data-r="cardflash"] div[style*="line-through"] { font-size: 10px !important; }
  [data-r="cardev"] { margin-bottom: 1px !important; width: max-content !important; max-width: none !important; white-space: nowrap !important; }
  [data-r="cardev"] > span[style] { font-size: 8.5px !important; padding: 2px 6px 2px 3px !important; white-space: nowrap !important; }
}
@media (max-width: 600px) {
  [data-r="cardflash"] { gap: 2px !important; }
  [data-r="cardflash"] > span[style] { font-size: 8px !important; padding: 3px 5px !important; }
  [data-r="cardflash"] div[style*="line-through"] { font-size: 9.5px !important; }
}

/* ===== Fleet card spec row + flash badge: fit the narrow 2-up card ===== */
@media (max-width: 1024px) {
  [data-r="cardspecs"] {
    gap: 9px !important;
    padding-top: 16px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  [data-r="cardspecs"] > span[style] {
    font-size: 11.5px !important;
    gap: 4px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  /* column direction, so horizontal placement comes from align-items */
  [data-r="cardflash"] { align-items: flex-end !important; }
}
@media (max-width: 600px) {
  [data-r="cardspecs"] { gap: 6px !important; padding-top: 16px !important; }
  [data-r="cardspecs"] > span[style] { font-size: 10.5px !important; gap: 3px !important; }
}

/* ===== Car-rental hero: shorter on phone + tablet ===== */
@media (max-width: 1024px) {
  /* the 90deg scrim compresses on a narrow screen, so its dark end covers most
     of the hero; a vertical wash lets more of the photo through */
  [data-r="crhero"] { padding: 18px 20px 0 !important; }
  /* teal hairline marks the block, as on terms and rates */
  [data-r="crhh1"] { font-size: 28px !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; max-width: 100% !important; }
  [data-r="crhsub"] { font-size: 14px !important; line-height: 1.6 !important; margin-top: 10px !important; max-width: 100% !important; }
}
@media (max-width: 600px) {
  [data-r="crhero"] { padding: 16px 18px 0 !important; }
  [data-r="crhh1"] { font-size: 24px !important; }
  [data-r="crhsub"] { font-size: 13.5px !important; }
}

/* ===== Class pages (economy/premium/luxury/exotic) hero + card image, phone + tablet ===== */
@media (max-width: 1024px) {
  /* trust badges: one sideways-scrolling row instead of a 2-line wrap */
  [data-r="clspills"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 20px !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  [data-r="clspills"]::-webkit-scrollbar { display: none; }
  [data-r="clspills"] > span[style] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    padding: 8px 14px !important;
  }

  /* hero copy: first sentence only (second sentence hidden, not clamped) */
  [data-r="clssub"] {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    margin-top: 14px !important;
  }
  [data-r="clssub2"] { display: none !important; }
}

@media (max-width: 1024px) {
  /* the class pages now use the promotion page's pkbox/pkgrid markup, which the
     rules above already cover; only the section padding is page-specific */
  section[data-r="clsctasec"][style] { padding: 0 16px !important; margin-top: 56px !important; }
}


/* ===== Home hero: device scale (matches the car-rental hero) ===== */
@media (max-width: 1024px) {
  [data-r="homehero"] { padding: 44px 20px 40px !important; }
  /* same treatment as the terms hero: a teal hairline marks the block, the
     headline tightens, and the lede returns small rather than being dropped */
  [data-r="homeheroin"] { border-left: 0 !important; }
  [data-r="homehero"] h1 { font-size: 36px !important; line-height: 0.98 !important; letter-spacing: -0.035em !important; max-width: 100% !important; }
  [data-r="homehero"] p {
    display: block !important;
    font-size: 14.5px !important; line-height: 1.6 !important;
    margin-top: 14px !important; max-width: 42ch !important;
  }
}
@media (max-width: 600px) {
  [data-r="homehero"] { padding: 34px 18px 32px !important; }
  [data-r="homeheroin"] { padding-left: 14px; }
  [data-r="homehero"] h1 { font-size: 31px !important; }
  [data-r="homehero"] p { font-size: 14px !important; }
}

/* ===== Home class cards: title + Select only on phone + tablet =====
   The copy stays in the HTML (display:none), so crawlers still read it. */
/* ===== Home class cards: one sideways-scrolling row on phone + tablet =====
   The card box itself keeps its desktop styling (padding, image, bullets,
   SELECT button) - only the row layout changes. */
@media (max-width: 1024px) {
  div[data-r="classgrid"][data-keep-cols] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    scroll-snap-type: x mandatory;
    /* mandatory snapping aligns the first card to the scrollport start, which
       would cancel the padding that compensates the negative margin bleed */
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 0 20px 4px !important;
  }
  [data-r="classgrid"]::-webkit-scrollbar { display: none; }
  [data-r="classgrid"] > div {
    /* one card per screen with the next peeking in, so the class photo and its
       bullet list get the full content width instead of half of it */
    flex: 0 0 calc(100% - 40px - 200px) !important;
    max-width: none;
    scroll-snap-align: start;
    /* the inline height:100% would beat align-items:stretch and let each card
       size to its own content, so clear it and stretch to the tallest */
    height: auto !important;
    align-self: stretch !important;
  }
  /* overflow-x clips the shadow into a hard line */
  [data-r="classgrid"] > div > a[style] { box-shadow: none !important; }

  /* the photo is capped by the band's WIDTH, not its height (2.727:1 source with
     `contain`), so bleed the band out to the card's padding edges to enlarge it.
     Anything over 100% background-size crops into the cars. */
  [data-r="classgrid"] > div > a[style] { padding: 36px 20px 30px !important; border-radius: 22px !important; }
  [data-r="classgrid"] > div > a > div:first-child { transform: translateY(5%); height: 180px !important; margin: 0 -20px 4px !important; max-width: none !important; }
  [data-r="classgrid"] > div > a > div:nth-child(2)[style] { font-size: 22px !important; }
  [data-r="classgrid"] [data-r="clsrule"][style] { margin: 26px 0 0 !important; }
  [data-r="classgrid"] [data-r="clsbullets"][style] { gap: 16px !important; margin-top: 26px !important; }
  [data-r="classgrid"] [data-r="clsbullets"] > div[style] { font-size: 13.5px !important; line-height: 1.5 !important; gap: 9px !important; }
  [data-r="classgrid"] > div > a > div:last-child[style] { margin-top: 30px !important; height: 50px !important; border-radius: 25px !important; font-size: 13px !important; }
}
@media (max-width: 600px) {
  div[data-r="classgrid"][data-keep-cols] { margin-left: -18px !important; margin-right: -18px !important; padding: 0 18px 4px !important; scroll-padding-left: 18px !important; }
  [data-r="classgrid"] > div { flex: 0 0 calc(100% - 36px - 96px) !important; }
  [data-r="classgrid"] > div > a[style] { padding: 32px 16px 26px !important; }
  [data-r="classgrid"] > div > a > div:first-child { height: 150px !important; margin: 0 -16px 4px !important; }
  [data-r="classgrid"] > div > a > div:nth-child(2)[style] { font-size: 20px !important; }
  [data-r="classgrid"] [data-r="clsbullets"] > div[style] { font-size: 13px !important; }
  [data-r="classgrid"] > div > a > div:last-child[style] { height: 48px !important; margin-top: 26px !important; }
}

/* ===== Device touch pass: card controls sized for fingers ===== */
@media (max-width: 1024px) {
  /* favourite heart: 34px is under the 44px touch minimum */
  [data-r="fleetimg"] button[data-nx-heart] {
    width: 42px !important;
    height: 42px !important;
  }
  [data-r="fleetimg"] button[data-nx-heart] svg { width: 19px !important; height: 19px !important; }
  /* compare badge is always visible on touch, so give it a real tap area */
  [data-r="cmpbtn"] {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
  /* "per day" at 10px is below the legibility floor */
  [data-r="cardprice"] > div[style*="font-size: 10px"] { font-size: 11px !important; }
}

/* ===== Fleet search bar: stays pinned on phone + tablet too =====
   (the global rule above flattens every sticky element) */
@media (max-width: 1024px) {
  [data-r="fleetsearch"] {
    position: sticky !important;
    top: calc(var(--nx-h, 72px) + 8px) !important;
    z-index: 28 !important;
    margin-bottom: 14px !important;
  }
  [data-r="fleetsearch"] input { padding: 13px 0 !important; font-size: 14.5px !important; }
}
@media (max-width: 600px) {
  [data-r="fleetsearch"] input { font-size: 14px !important; }
  [data-r="fleetsearch"] span[style] { display: none !important; }
}

/* ===== Scroll-row headroom (must be last) =====
   overflow-x: auto clips vertically too, so a hovered card inside one of these
   rows loses its top edge. These selectors carry [style] to outrank the earlier
   per-page rules that zero the padding, and sit at the end of the file so they
   win on order as well. Compensated on the BOTTOM, because several of these
   rows set their own margin-top that must not be clobbered. Desktop only: on
   device these rows become plain grids with overflow visible, so there is
   nothing to clip and the extra padding would just add a gap. */
@media (min-width: 1025px) {
  div[data-r="promocards"][style],
  div[data-r="pkgrid"][style],
  div[data-flash-slider][style],
  div[data-ev-slider][style],
  div[data-r="blogcards"][style],
  div[data-r="sngrid"][style] {
    padding-top: 10px !important;
    margin-bottom: -10px;
  }
}

/* ===== Home reviews: full-bleed auto-playing marquee =====
   The card list is rendered TWICE, so travelling exactly one copy's width
   (-50% of the track) lands on an identical frame and the reset is invisible.
   Cards get a fixed width so the loop distance is stable. */
@keyframes nxRevMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
div[data-r="revcards"][style] {
  animation: nxRevMarquee 70s linear infinite;
  will-change: transform;
  /* the page's global `* { max-width: 100% }` reset (inside a 1024px block)
     caps the track, and translateX(-50%) then resolves against the capped box
     instead of the real 2-copy width, so the loop snaps back partway */
  max-width: none;
  /* a doubled N-card track has 2N cards but only 2N-1 gaps, so -50% travels one
     gap less than a true repeat period; the trailing gap squares the box up */
  padding-right: 18px;
}
div[data-r="revcards"] > div { flex: 0 0 340px; }
/* the about page's cards are the same component, so they inherit the track */
#dc-root [data-r="revmarquee"] { width: 100%; }
@media (max-width: 1024px) {
  div[data-r="revcards"][style] { animation-duration: 56s; gap: 12px !important; padding-right: 12px; }
  div[data-r="revcards"] > div { flex-basis: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  div[data-r="revcards"][style] { animation: none; }
  div[data-r="revmarquee"] { overflow-x: auto; }
}


/* ===== Hero breadcrumb: on desktop it pulls up into the hero top padding; under 1024px the hero padding already clears the fixed nav, so sit it in normal flow ===== */
@media (max-width: 1024px) {
  [data-r="nxcrumb"][style] { margin-top: 0 !important; margin-bottom: 16px !important; font-size: 12px !important; gap: 7px !important; }
}

/* ===== Rates: price list uses the shared fleet filter card ===== */
@media (max-width: 1024px) {
  #pricelist { padding-left: 16px !important; padding-right: 16px !important; }
  /* the layout collapses to one column: the filter card becomes the floating
     pill + sheet that nav.js builds, so only the table remains in flow */
  #pricelist div[data-r="fleetlayout"][style] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
}

/* ===== Trim pills: one hover treatment site-wide =====
   Fleet cards (car-rental, class pages, home) use buttons; the "Explore similar
   rides" strip uses spans. Pointer devices only, so a tap never leaves a stuck
   hover state. The selected pill is identified by its inline #111316 fill and is
   deliberately left alone. Colour-only change, so nothing shifts. */
@media (hover: hover) and (pointer: fine) {
  [data-r="trims"] > button:not([style*="rgb(17, 19, 22)"]):hover,
  [data-r="trims"] > span:not([style*="rgb(17, 19, 22)"]):hover {
    background: #e7e3da !important;
    border-color: #cfccc3 !important;
    color: #111316 !important;
  }
  [data-r="trims"] > button,
  [data-r="trims"] > span { transition: background .15s ease, border-color .15s ease, color .15s ease; }
}

/* ===== Delivery CTA button: device =====
   A single pill at 16px/30px padding left a short, oddly-centred button in a
   full-width column. On device it spans the column so it reads as the section's
   action, with a 48px tap target. */
@media (max-width: 1024px) {
  div[data-r="dlvbtns"][style] { margin-top: 22px !important; gap: 10px !important; }
  div[data-r="dlvbtns"] > a[style] {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px !important;
    font-size: 15px !important;
    /* a global 1024px rule forces flex-wrap: wrap on every flex box, which can
       break a three-word label onto two lines inside the pill */
    flex-wrap: nowrap !important;
    white-space: nowrap;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background-color .12s ease;
  }
  /* touch has no hover, so the press itself has to acknowledge the tap */
  div[data-r="dlvbtns"] > a[style]:active { transform: scale(0.985); background: #2a2f35 !important; }
}
@media (max-width: 560px) {
  div[data-r="dlvbtns"] > a[style] { font-size: 14.5px !important; min-height: 46px; padding: 0 18px !important; }
}

/* ===== Delivery: interstate section, device =====
   Two 320px cards and the nationwide table sat on 32px section padding with
   24px card padding, so a phone showed ~290px of usable width for a six-column
   table. Tighten the frame, stack the cards, and match the icon box to the
   other section eyebrows. */
@media (max-width: 1024px) {
  section[data-r="dnatzsec"][style] { padding: 40px 16px 0 !important; }
  /* one sideways row rather than a tall stack: the cards are peers, so the
     customer swipes between them instead of scrolling past three of them */
  div[data-r="dnatzones"][style] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
    /* bleed to the screen edges so a card can sit flush */
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 2px 16px 6px !important;
    scroll-padding-left: 16px;
  }
  div[data-r="dnatzones"]::-webkit-scrollbar { display: none; }
  div[data-r="dnatzones"] > div[style] {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start;
    padding: 18px 16px 16px !important;
    border-radius: 14px !important;
  }
  /* the eyebrow icon matches the 34px boxes used by the zone and nationwide
     headings above it */
  div[data-r="dnatzones"] > div > div:first-child[style] { font-size: 11px !important; margin-bottom: 12px !important; gap: 9px !important; }
  div[data-r="dnatzones"] > div > div:first-child > span[style] { width: 34px !important; height: 34px !important; background-size: 31px 31px !important; border-radius: 10px !important; }
  div[data-r="dnatzones"] [style*="font-size: 14.5px"] { font-size: 14px !important; }
  div[data-r="dnatzones"] [style*="font-size: 13px"] { font-size: 12.5px !important; line-height: 1.5 !important; }
  div[data-r="dnattbl"][style] { margin-top: 16px !important; border-radius: 14px !important; }
}
@media (max-width: 560px) {
  section[data-r="dnatzsec"][style] { padding-left: 14px !important; padding-right: 14px !important; }
  div[data-r="dnatzones"][style] { margin-left: -14px !important; margin-right: -14px !important;
    padding-left: 14px !important; padding-right: 14px !important; scroll-padding-left: 14px; }
  div[data-r="dnatzones"] > div[style] { flex-basis: 86% !important; max-width: 86% !important; }
}

/* ===== Vehicle cards: short brand on device =====
   Both names are real spans and only one is displayed, so no font-size trick
   can be overridden by a card-title rule. Data, metadata and detail headings
   keep "Mercedes-Benz"; only the card label changes at device widths. */
/* the name column takes all the room the price leaves, so long brands (Mercedes-Benz, Rolls-Royce, Aston Martin) are not cut off on desktop */
[data-r="cardtop"] > [data-r="cardleft"] { flex: 1 1 auto; }
[data-r="cardbrand"] [data-bs] { display: none; }
@media (max-width: 1024px) {
  [data-r="cardbrand"] [data-bf] { display: none; }
  [data-r="cardbrand"] [data-bs] { display: inline; }
}

/* ===== About: "What you always get" on device =====
   The brief asks for the two-column values and side-by-side buttons to stay
   usable down to 320px, so the grid keeps both columns at every width and the
   gap tightens instead. Icons stay above their text; type stops at 12.5px so
   nothing shrinks into illegibility, and both buttons keep a 48px tap target. */
@media (max-width: 1024px) {
  [data-r="aboutcta"] [data-r="ctahead"] { max-width: none !important; }
  [data-r="aboutcta"] [data-r="ctapanelh"][style] { margin: 26px 0 16px !important; font-size: 11px !important; }
  [data-r="aboutcta"] [data-r="ctagrid"][style] {
    grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; max-width: none !important; }
  [data-r="aboutcta"] [data-r="ctarow"][style] {
    display: flex !important; flex-direction: row !important; gap: 10px !important; }
  [data-r="aboutcta"] [data-r="ctarow"] > div[style] { padding-top: 6px !important; }
  [data-r="aboutcta"] [data-r="ctaicon"][style] {
    width: 30px !important; height: 30px !important; background-size: 28px 28px !important; }
  [data-r="aboutcta"] [data-r="ctarow"] > div > div:first-child { font-size: 13.5px !important; line-height: 1.3 !important; }
  [data-r="aboutcta"] [data-r="ctarow"] > div > div:last-child { font-size: 12.5px !important; }
  [data-r="aboutcta"] [data-r="ctabtns"][style] { gap: 10px !important; margin-top: 28px !important; }
  [data-r="aboutcta"] [data-r="ctabtns"] > a[style] {
    font-size: 14.5px !important; padding: 13px 18px !important; min-height: 48px !important; }
}
@media (max-width: 420px) {
  [data-r="aboutcta"] [data-r="ctagrid"][style] { gap: 18px 12px !important; }
  [data-r="aboutcta"] [data-r="ctabtns"] > a[style] {
    flex: 1 1 0 !important; padding: 13px 10px !important; font-size: 13.5px !important; white-space: nowrap; }
}

/* ===== Fleet filter panel: mobile layout from the first paint =====
   These rules used to live in the page's own <helmet>, which mounts after the
   head, so a slow load painted the DESKTOP filter column first and switched to
   the mobile layout a moment later. mobile.css is a head <link>, so moving them
   here puts the mobile layout in force before anything paints. Breakpoints are
   unchanged (980px / 981px), as are the selections, badges and dropdowns. */
@media (max-width: 980px) {
  [data-r="fleetlayout"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-r="fleetside"] {
    position: static !important; display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px !important;
    padding: 16px !important;
    /* the desktop panel scrolls inside itself; on mobile that clipped every dropdown popup */
    max-height: none !important; overflow: visible !important;
  }
  [data-r="fleetgrp"] { min-width: 0; }
  [data-r="fleetgrp"][style*="gap: 10px"] { grid-column: 1 / -1; }
}

/* ===== Booking form date / time buttons: the ▾ stays beside the value (mv/tv) =====
   A generic device rule lets flex buttons wrap, which dropped the arrow onto a
   second line under "Mon, 30/11/26" in a narrow column. */
@media (max-width: 1024px) {
  #reserve button[data-req="pickupDate"], #reserve button[data-req="returnDate"],
  #reserve button[data-req="pickupTime"], #reserve button[data-req="returnTime"] {
    flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important;
  }
  #reserve button[data-req="pickupDate"] > span:first-child, #reserve button[data-req="returnDate"] > span:first-child,
  #reserve button[data-req="pickupTime"] > span:first-child, #reserve button[data-req="returnTime"] > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #reserve button[data-req="pickupDate"] > span:last-child, #reserve button[data-req="returnDate"] > span:last-child,
  #reserve button[data-req="pickupTime"] > span:last-child, #reserve button[data-req="returnTime"] > span:last-child {
    flex-shrink: 0;
  }
}

/* ===== Booking form add-on rows: the checkbox stays beside its name (mv/tv) =====
   The same generic wrap rule pushed the checkbox onto its own line above
   "Mobile phone holder" / "Touch 'n Go card" in the narrow two-column grid. */
@media (max-width: 1024px) {
  #reserve div[style*="justify-content: space-between"][style*="cursor: pointer"] {
    flex-wrap: nowrap !important;
  }
  #reserve div[style*="justify-content: space-between"][style*="cursor: pointer"] > span[style*="gap: 12px"] {
    flex-wrap: nowrap !important; min-width: 0; flex: 1 1 auto;
  }
  #reserve div[style*="justify-content: space-between"][style*="cursor: pointer"] > span[style*="gap: 12px"] > span:first-child {
    flex-shrink: 0;
  }
  #reserve div[style*="justify-content: space-between"][style*="cursor: pointer"] > span[style*="gap: 12px"] > span[style*="flex-direction: column"] {
    min-width: 0; flex: 1 1 auto;
  }
  #reserve div[style*="justify-content: space-between"][style*="cursor: pointer"] > :last-child:not(span[style*="gap: 12px"]) {
    flex-shrink: 0;
  }
}

/* booking form number circles: every circle sits at the top of its section, level with the first label row */

/* ===== Booking form: "Same as pick-up" in the Drop-off address reads as a chosen value =====
   It is the field's placeholder while no separate drop-off is set, so it is
   painted in the same ink as a typed address rather than placeholder grey. */
#reserve input[data-nx-addr="drop"][placeholder="Same as pick-up"]::placeholder { color: #111316; opacity: 1; }

/* ===== Booking form note rows (✓ Free cancellation…): the tick stays beside its text (mv/tv) ===== */
@media (max-width: 1024px) {
  #reserve div[style*="align-items: flex-start"][style*="gap: 9px"],
  [data-r2="summary"] div[style*="align-items: flex-start"][style*="gap: 9px"] { flex-wrap: nowrap !important; flex-direction: row !important; }
  #reserve div[style*="align-items: flex-start"][style*="gap: 9px"] > span:first-child,
  [data-r2="summary"] div[style*="align-items: flex-start"][style*="gap: 9px"] > span:first-child { flex: 0 0 auto !important; }
  #reserve div[style*="align-items: flex-start"][style*="gap: 9px"] > span:last-child,
  [data-r2="summary"] div[style*="align-items: flex-start"][style*="gap: 9px"] > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ===== Booking form: × close sits in the Car row of section 1 (header title removed) ===== */
#reserve [data-r="carrow"] [data-r="bkclose"] { position: static !important; transform: none !important; top: auto !important; right: auto !important; flex-shrink: 0; margin-bottom: 4px; }
#reserve [data-r="carrow"] [data-r="formtoggle"] { position: static !important; margin-bottom: 4px; }

/* ===== Booking Summary: "Book this vehicle" fades in once the form is complete ===== */
@keyframes nxSumBookIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-r2="summary"] [data-r="sumbook"] { width: 100%; box-sizing: border-box; text-decoration: none; animation: nxSumBookIn .28s ease both; }
@media (prefers-reduced-motion: reduce) { [data-r2="summary"] [data-r="sumbook"] { animation: none; } }

/* ===== Sticky bar price block (page bar and form-open bar), device ===== */
@media (max-width: 1024px) {
  [data-r="bksticky"] > div:first-child, [data-r="sbarprice"] { flex: 1 1 auto; min-width: 0; }
  [data-r="bksticky"] > div:first-child > div:first-child,
  [data-r="sbarprice"] > div:first-child { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; min-width: 0; }
  [data-r="bksticky"] > div:first-child > div:first-child > span:first-child,
  [data-r="sbarprice"] > div:first-child > span:first-child { font-size: 20px !important; line-height: 1.1 !important; white-space: nowrap; }
  [data-r="bksticky"] > div:first-child > div:first-child > span:nth-child(2),
  [data-r="sbarprice"] > div:first-child > span:nth-child(2) { font-size: 11.5px !important; white-space: nowrap; }
  [data-r="bksticky"] > div:first-child span:empty, [data-r="sbarprice"] span:empty { display: none !important; }
  [data-r="bksticky"] > div:first-child > div:nth-child(2),
  [data-r="sbarprice"] > div:nth-child(2) { margin-top: 4px !important; font-size: 11.5px !important; line-height: 1.3 !important; }
}

/* ===== Sticky bar, device: total on its own line, "RMx x N days" + pill underneath ===== */
@media (max-width: 1024px) {
  [data-r="bksticky"] > div:first-child > div:first-child,
  [data-r="sbarprice"] > div:first-child { flex-wrap: wrap !important; row-gap: 3px !important; column-gap: 6px !important; }
  [data-r="bksticky"] > div:first-child > div:first-child > span:first-child,
  [data-r="sbarprice"] > div:first-child > span:first-child { flex: 0 0 100% !important; }
}

/* ===== Form-open sticky bar (Summary + Book), every width: total on its own
   line, "RMx x N days" + discount pill underneath ===== */
[data-r="bksticky"] > div:first-child > div:first-child { display: flex !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 3px !important; column-gap: 6px !important; }
[data-r="bksticky"] > div:first-child > div:first-child > span:first-child { flex: 0 0 100% !important; }
[data-r="bksticky"] > div:first-child span:empty { display: none !important; }

/* ===== Sticky bars, device: price block lines sit flush left and close together ===== */
@media (max-width: 1024px) {
  [data-r="bksticky"] > div:first-child, [data-r="sbarprice"] { text-align: left !important; padding: 0 !important; margin: 0 !important; }
  [data-r="bksticky"] > div:first-child > div:first-child,
  [data-r="sbarprice"] > div:first-child { row-gap: 1px !important; margin: 0 !important; }
  [data-r="bksticky"] > div:first-child > div:first-child > span,
  [data-r="sbarprice"] > div:first-child > span { margin: 0 !important; padding-left: 0 !important; }
  [data-r="bksticky"] > div:first-child > div:first-child > span:first-child,
  [data-r="sbarprice"] > div:first-child > span:first-child { line-height: 1.05 !important; letter-spacing: 0 !important; margin-left: -1px !important; }
  [data-r="bksticky"] > div:first-child > div:first-child > span:nth-child(2),
  [data-r="sbarprice"] > div:first-child > span:nth-child(2) { line-height: 1.25 !important; }
  [data-r="bksticky"] > div:first-child > div:nth-child(2),
  [data-r="sbarprice"] > div:nth-child(2) { margin-top: 2px !important; line-height: 1.25 !important; }
}

/* ===== Short-term packages: the 3-day card with its delivery info spans the
   whole row on device, so it stays compact and the other cards keep their height ===== */
@media (max-width: 1024px) {
  /* the scroller is 2 rows flowing in columns: the 3-day card takes both rows of
     its own column, and no card stretches to its height */
  /* every package card now carries its credit pill: cards keep their own height */
  [data-r="pkgrow"]:has([data-t="dlv"]) { align-items: stretch !important; }
  [data-r="pkgrow"] > button:has([data-t="dlv"]) [data-t="dlv"] { font-size: 11.5px !important; }
}

/* ===== promotion.html Delivery Credits: 2 columns on tablet, 1 on phone ===== */
@media (max-width: 1024px) {
  [data-r="dcsec"][style] { padding: 64px 20px 0 !important; }
  [data-r="dcsec"] h2[style] { font-size: 30px !important; }
  [data-r="dcbox"][style] { padding: 18px !important; border-radius: 22px !important; }
  [data-r="dcgrid"][style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (max-width: 560px) {
  [data-r="dcgrid"][style] { grid-template-columns: 1fr !important; }
}

/* ===== "Your dates" box: Pick-up / Drop-off fields stacked on phone ===== */
@media (max-width: 560px) {
  [data-r="ptlocs"][style] { grid-template-columns: 1fr !important; }
  [data-r="ptlocs"] input[data-nx-addr] { font-size: 16px !important; }
}
#ptdates ~ [data-r="ptlocs"] input[data-nx-addr="drop"][placeholder="Same as pick-up"]::placeholder,
[data-r="ptlocs"] input[data-nx-addr="drop"][placeholder="Same as pick-up"]::placeholder { color: #111316; opacity: 1; }

/* ===== Car-page package cards on device: a plain grid (no sideways scroll),
   compact cards so the price, per day and credit pill read at a glance ===== */
@media (max-width: 1024px) {
  html body div[data-r="pkgrow"][style]:not(#nx) {
    display: grid !important; grid-auto-flow: row !important; grid-template-rows: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important;
    overflow: visible !important; gap: 8px !important; padding: 0 !important; margin: 18px 0 0 !important; scroll-snap-type: none !important;
  }
  html body div[data-r="pkgrow"][style]:not(#nx) > button { width: auto !important; min-width: 0 !important; padding: 11px 12px !important; scroll-snap-align: none !important; }
  html body div[data-r="pkgrow"] [data-t="dlv"][style] { margin-top: 7px !important; padding-top: 7px !important; gap: 4px !important; font-size: 10.5px !important; }
  html body div[data-r="pkgrow"] [data-t="dlv"] > span:first-child { font-size: 10px !important; padding: 3px 8px !important; white-space: normal !important; line-height: 1.3 !important; max-width: 100%; box-sizing: border-box; }
  html body div[data-r="pkgrow"][style]:not(#nx) > button * { max-width: 100%; overflow-wrap: anywhere; }
  html body div[data-r="pkgrow"] [data-t="dlv"] > a { font-size: 10.5px !important; }
}
@media (max-width: 560px) {
  html body div[data-r="pkgrow"][style]:not(#nx) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* promotion.html "How it works" calculator: stacked on device */
@media (max-width: 1024px) {
  [data-r="dccalc"][style] { grid-template-columns: 1fr !important; padding: 18px !important; gap: 18px !important; border-radius: 18px !important; }
  [data-r="dccalc"] p[style] { font-size: 18px !important; }
}

/* promotion.html in-page nav on device: full-width scrollable pill */
@media (max-width: 1024px) {
}

/* ===== Zone fee table (delivery.html, promotion.html): the day-column labels are
   for the stacked device layout; the desktop table has a header row instead ===== */
[data-r="dzlbl"] { display: none; }
@media (max-width: 1024px) { [data-r="dzlbl"] { display: block; } }

/* ===== promotion.html Delivery section: the zone fee table uses delivery.html's
   stacked device layout (cards with the four day bands under the zone name) ===== */
@media (max-width: 1024px) {
  [data-r="dcsec"] div[data-r="dztbl"][style] { margin-top: 18px !important; border-radius: 14px !important; }
  [data-r="dcsec"] [data-r="dzhead"][style] { display: none !important; }
  [data-r="dcsec"] [data-r="dzbody"] > [data-r="dzrow"][style] {
    display: block !important;
    padding: 14px 16px !important;
  }
  [data-r="dcsec"] [data-r="dzrow"] > div:first-child[style] { font-size: 14px !important; line-height: 1.4 !important; }
  [data-r="dcsec"] [data-r="dzrow"] > div:first-child > span[style] { font-size: 11.5px !important; }
  [data-r="dcsec"] [data-r="dzrow"] > [data-r="dzfee"][style] {
    font-size: 12.5px !important;
    color: #9a948a !important;
    margin-top: 8px !important;
    padding-left: 19px;
  }
  [data-r="dcsec"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Zone fee "; }
  [data-r="dcsec"] [data-r="dzrow"] > [data-r="dzfee"]::after { content: " / way"; }
  [data-r="dcsec"] [data-r="dzrow"] > [data-r="dzd"][style] {
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
    width: calc(50% - 12px);
    margin: 10px 8px 0 0;
    padding-left: 19px;
    font-size: 14px !important;
  }
  [data-r="dcsec"] [data-r="dzlbl"] { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a948a; }
}
@media (max-width: 1024px) {
  section[data-r="dcsec"][style] { padding: 52px 16px 0 !important; }
  section[data-r="dcsec"] h2[style] { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
  section[data-r="dcsec"] > div:first-child[style] { margin-bottom: 20px !important; gap: 10px !important; }
  section[data-r="dcsec"] > div:first-child p[style] { font-size: 14px !important; }
  section[data-r="dcsec"] div[data-r="dztbl"][style] { margin-top: 0 !important; }
}
/* the nationwide rows (incl. the no-delivery row) sit in the same table here */
@media (max-width: 1024px) {
  [data-r="dcsec"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Rate "; }
  [data-r="dcsec"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::before,
  [data-r="dcsec"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::after { content: ""; }
  /* on the tinted no-delivery row the grey label goes muddy */
  [data-r="dcsec"] [data-r="dzrow"][style*="eaf7f5"] [data-r="dzlbl"] { color: #3f8f88; }
  section[data-r="dcsec"] h2[style] { font-size: 26px !important; line-height: 1.12 !important; }
  section[data-r="dcsec"] > div > div:first-child > div:first-child[style] { font-size: 11px !important; }
  section[data-r="dcsec"] p[style] { font-size: 14.5px !important; margin-top: 10px !important; }
}


/* ===== Shared leg markers (booking form + "Your dates" box, same look as
   delivery.html and the car-page calculator): teal ring = pick-up,
   hot pink square = drop-off ===== */
.nx-legmk { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; box-sizing: border-box; pointer-events: none; z-index: 1; }
.nx-legmk-pick { border-radius: 50%; background: #fff; border: 3px solid #4ECEC4; box-shadow: 0 0 0 3px rgba(78,206,196,0.22); }
.nx-legmk-drop { border-radius: 3px; background: #FF2D87; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(255,45,135,0.22); }
.nx-legmk + input[data-nx-addr] { padding-left: 34px !important; }

/* ===== delivery.html map placeholder: reserve the real device map height
   (70svh, min 420px) from first paint, so the page does not shrink by ~70px
   when the map mounts under a visitor who has already scrolled ===== */
@media (max-width: 1024px) {
  [data-r="dmapwrap"] > x-import, [data-r="dmapwrap"] > * { height: max(420px, 70svh) !important; min-height: 0 !important; display: block; }
}

/* ===== Launch a11y: tap targets and minimum text size on device =====
   Small trim pills and the breadcrumb keep their look but get an invisible
   44px hit area; short labels under 11px are raised to 11px. */
@media (max-width: 1024px) {
  [data-r="trims"] > a, [data-r="trims"] > button, [data-r="trims"] > span[role="button"],
  nav[aria-label="Breadcrumb"] a { position: relative; }
  [data-r="trims"] > a::after, [data-r="trims"] > button::after, [data-r="trims"] > span[role="button"]::after,
  nav[aria-label="Breadcrumb"] a::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  /* (promocards and flashstack removed: "1em" there is the card's 15-16px, so
     every label in the package cards grew; they have their own sizes below) */
  [data-r="specsum"] *, [data-r="safetysum"] *,
  [data-r="pkgrow"] *, [data-r="addseats"] *, [data-r="cardbodytype"] * { font-size: max(11px, 1em) !important; }
  /* fleet card trim pills and the body type line: "max(11px, 1em)" took 1em from
     the card (15-16px) and blew them up; they get fixed small sizes instead */
  [data-r="trims"] > button[style], [data-r="trims"] > span[style], [data-r="trims"] > a[style] { font-size: 11px !important; padding: 3px 8px !important; line-height: 1.15 !important; }
  [data-r="cardbodytype"][style] { font-size: 11px !important; }
  /* a flash-slider rule meant for the old brand line hits the trim pill
     (same position in the card) and stretched it to the full card width */
  [data-flash-slider] [data-r="trims"] > span[style], [data-r="trims"] > span[style] { flex: 0 0 auto !important; order: 0 !important; margin-top: 0 !important; width: auto !important; display: inline-block !important; font-size: 11px !important; }
}

/* delivery.html "View Delivery Rates": one full-width button (a two-column grid
   rule left it in half the row) */
@media (max-width: 1024px) {
  html body div[data-r="dlvbtns"][style] { grid-template-columns: minmax(0, 1fr) !important; }
  html body div[data-r="dlvbtns"][style] > a[style] { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* ===== Booking Summary price rows: the label column takes the free width and
   its grey sub lines may wrap; each line keeps its own height so a wrapped
   "3 days × RM6,500.00/day" can never run into "Unlimited Mileage" ===== */
[data-r2="summary"] div[style*="justify-content: space-between; align-items: flex-start"] > span:first-child { flex: 1 1 auto; min-width: 0; }
[data-r2="summary"] div[style*="justify-content: space-between; align-items: flex-start"] > span:first-child > span { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
[data-r2="summary"] div[style*="justify-content: space-between; align-items: flex-start"] > span:last-child { flex: 0 0 auto; }

/* ===== promotion.html delivery table on device: every zone row is an accordion.
   Closed: swatch, zone, best deal + chevron (one 56px tap row). Open: the areas
   and the four day-band prices. Height animates in promotion.html (WAAPI). ===== */
[data-r="dzsum"] { display: none; }
@media (max-width: 1024px) {
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 56px; box-sizing: border-box; transition: background-color .2s ease; }
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]):active { background-color: #f4f2ec !important; }
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]):focus-visible { outline: 2px solid #4ECEC4; outline-offset: -2px; }
  /* the best deal + chevron float on the name line; the areas line below spans
     the whole row width under them */
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) > div:first-child[style] { padding-right: 0 !important; min-height: 26px; display: block; }
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) [data-r="dzsum"] {
    display: inline-flex; align-items: center; gap: 10px; float: right; margin: -1px 0 0 12px;
    font-size: 12.5px; font-weight: 700; color: #0f8a80; white-space: nowrap; letter-spacing: 0;
  }
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) > div:first-child > span[style*="display: block"],
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) > div:first-child > sc-if > span { clear: both; padding-top: 8px; margin-top: 0 !important; }
  #delivery-credits [data-r="dzchev"] {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #f1efe9; position: relative;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
  }
  #delivery-credits [data-r="dzchev"]::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5px 0 0 -3.5px;
    border-right: 2px solid #111316; border-bottom: 2px solid #111316; transform: rotate(45deg);
  }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzchev"] { transform: rotate(180deg); background: #4ECEC4; }
  /* closed: the areas line and the four prices are tucked away */
  section#delivery-credits [data-r="dzrow"]:has([data-r="dzd"]):not([data-open="1"]) > div:first-child > span[style*="display: block"],
  section#delivery-credits [data-r="dzrow"]:has([data-r="dzd"]):not([data-open="1"]) > div:first-child > sc-if,
  section#delivery-credits[data-r="dcsec"] [data-r="dzrow"]:has([data-r="dzd"]):not([data-open="1"]) > [data-r="dzd"][style],
  section#delivery-credits[data-r="dcsec"] [data-r="dzrow"]:has([data-r="dzd"]):not([data-open="1"]) > sc-if > [data-r="dzd"][style] { display: none !important; }
  /* open: the content fades up as the row grows */
  #delivery-credits [data-r="dzrow"][data-open="1"] > div:first-child > span[style*="display: block"],
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"] { animation: nxDzIn .26s cubic-bezier(.2,.8,.2,1) both; }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"]:nth-of-type(2) { animation-delay: .03s; }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"]:nth-of-type(3) { animation-delay: .06s; }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"]:nth-of-type(4) { animation-delay: .09s; }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"]:nth-of-type(5) { animation-delay: .12s; }
}
@media (max-width: 380px) {
  #delivery-credits [data-r="dzrow"]:has([data-r="dzd"]) [data-r="dzsum"] { font-size: 11.5px; gap: 8px; }
}
@keyframes nxDzIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #delivery-credits [data-r="dzchev"] { transition: none; }
  #delivery-credits [data-r="dzrow"][data-open="1"] [data-r="dzd"],
  #delivery-credits [data-r="dzrow"][data-open="1"] > div:first-child > span[style*="display: block"] { animation: none; }
}

/* ===== Home flash sale slider on device: two cards and a peek of the next on
   phone (one-and-a-bit on small phones), snap per card, no scrollbar, the
   badge stays on the brand line and long names clip instead of pushing it ===== */
@media (max-width: 1024px) {
  div[data-flash-slider][style] { scroll-snap-type: x mandatory !important; gap: 10px !important; padding: 4px 16px 16px !important; margin: -4px -16px 0 !important; scroll-padding-left: 16px; scrollbar-width: none !important; cursor: auto !important; }
  div[data-flash-slider]::-webkit-scrollbar { display: none; }
  div[data-flash-slider][style] > a[style] { flex: 0 0 calc((100% - 20px) / 2.25) !important; min-width: 0 !important; }
  div[data-flash-slider] [data-r="cardbody"][style] { padding: 10px 11px 11px !important; }
  div[data-flash-slider] [data-r="flashbadge"][style] { top: 9px !important; right: 10px !important; font-size: 9px !important; padding: 3px 7px !important; }
  div[data-flash-slider] [data-r="cardbrand"][style] { padding-right: 84px !important; }
  div[data-flash-slider] [data-r="cardprice"][style] { margin-top: 28px !important; }
}
@media (max-width: 560px) {
  div[data-flash-slider][style] > a[style] { flex: 0 0 calc((100% - 10px) / 1.6) !important; }
}
@media (max-width: 360px) {
  div[data-flash-slider][style] > a[style] { flex: 0 0 82% !important; }
}

/* ===== Home package cards on device: compact pills (flash stack + delivery
   credit) that wrap instead of stretching the card ===== */
@media (max-width: 1024px) {
  div[data-r="promocards"] [data-r="flashstack"][style] { font-size: 9.5px !important; padding: 3px 7px !important; line-height: 1.25 !important; }
  div[data-r="promocards"] span[style*="rgba(78,206,196,0.16)"] { font-size: 9.5px !important; padding: 2px 7px !important; line-height: 1.3 !important; white-space: normal !important; max-width: 100%; box-sizing: border-box; }
  div[data-r="promocards"] > a > span[style*="gap: 7px"] { gap: 5px !important; }
  div[data-r="promocards"] > a > span[style*="gap: 5px"] { gap: 4px !important; }
}
@media (max-width: 560px) {
  div[data-r="promocards"][style] { grid-auto-columns: 46% !important; }
  div[data-r="promocards"] > a[style] { padding: 13px 12px !important; gap: 6px !important; }
  div[data-r="promocards"] [style*="font-size: 30px"] { font-size: 21px !important; }
  div[data-r="promocards"] [style*="font-size: 17px"] { font-size: 13.5px !important; }
}

/* ===== Car-page short-term packages on device, redesigned (2026-10-30):
   one tidy list instead of tiny cards. Each package is a row:
   "3 days" + per day on the left, the total big on the right, and the
   delivery credit pill + zones link on a thin second line. 2 columns on
   tablet, 1 on phone. Selected row keeps its dark style. ===== */
@media (max-width: 1024px) {
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2) {
    display: grid !important; grid-auto-flow: row !important; grid-template-rows: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto !important;
    gap: 8px !important; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important;
  }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2) > button {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "label total" "sub total" "dlv dlv" !important;
    column-gap: 12px !important; row-gap: 2px !important; align-items: center !important;
    min-height: 64px !important; padding: 12px 14px !important; border-radius: 14px !important; width: auto !important;
  }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="label"] { grid-area: label; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="sub"] { grid-area: sub; font-size: 12px !important; line-height: 1.3 !important; }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="total"] { grid-area: total; font-size: 19px !important; line-height: 1 !important; text-align: right; white-space: nowrap; overflow-wrap: normal !important; }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="dlv"][style] {
    grid-area: dlv; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    gap: 8px !important; margin-top: 9px !important; padding-top: 9px !important; font-size: 11.5px !important;
  }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="dlv"] > span:first-child { font-size: 11px !important; padding: 3px 9px !important; white-space: nowrap !important; overflow-wrap: normal !important; }
  html body div[data-r="pkgrow"]:not(#nx) > button > [data-t="dlv"] > a { font-size: 11.5px !important; white-space: nowrap; overflow-wrap: normal !important; padding: 6px 0; }
  html body div[data-r="pkgrow"]:not(#nx) > button > span:first-child[style*="position: absolute"] { top: -8px !important; right: 12px !important; }
}
@media (max-width: 560px) {
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2) { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* ===== Flash sale car cards on device (promotion and every page that has them):
   about 1.6 cards per row so the next one peeks, tighter body text, price
   block stays on the right of the name without crowding it ===== */
@media (max-width: 1024px) {
  div[data-r="flashrow"][style] { gap: 10px !important; scroll-padding-left: 2px; }
  /* the row is the 2-row grid set above (flashcard rules); cards size by its columns */
  div[data-r="flashrow"] > a[style*="flex: 0 0 260px"] { border-radius: 13px !important; }
  div[data-r="flashrow"] > a > span[aria-hidden="true"][style] { border-radius: 13px !important; }
  div[data-r="flashrow"] > a > div:not([data-r="flashimg"])[style] { padding: 12px 12px 13px !important; gap: 6px !important; }
  div[data-r="flashrow"] > a [data-r="flashbadge"][style], div[data-r="flashrow"] > a span[style*="SAVE"] { font-size: 9.5px !important; padding: 3px 7px !important; }
  div[data-r="flashrow"] > a [style*="font-size: 17px"], div[data-r="flashrow"] > a [style*="font-size: 18px"] { font-size: 15px !important; line-height: 1.2 !important; }
  div[data-r="flashrow"] > a [style*="font-size: 20px"], div[data-r="flashrow"] > a [style*="font-size: 22px"] { font-size: 17px !important; }
  div[data-r="flashrow"] > a [style*="font-size: 13px"] { font-size: 11.5px !important; }
  div[data-r="flashrow"] > a [style*="font-size: 12px"] { font-size: 11px !important; }
  div[data-r="flashrow"] > a [style*="text-decoration: line-through"] { font-size: 11px !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  /* tablet: 2.5 columns in view instead of 2.2, so cards are not 388px wide */
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]) { grid-auto-columns: 38% !important; }
}
@media (max-width: 380px) {
  /* narrowest phones: a little wider so the price row keeps "/day" */
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]) { grid-auto-columns: 68% !important; }
}

/* ===== Flash cards: the photo box keeps its 1.5:1 shape. In the device 2-row
   grid the card is a short flex column and the aspect-ratio box was shrunk
   to 0px tall, so no photo showed. ===== */
div[data-r="flashimg"][style] { flex: 0 0 auto !important; display: block !important; width: 100% !important; height: 0 !important; padding-top: 66.34% !important; aspect-ratio: auto !important; }
@media (max-width: 1024px) {
  div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]){ grid-template-rows: auto auto !important; align-items: start !important; }
}

/* ===== promotion.html "Pay by card, RM0 deposit" card on device: full width of
   the text column, smaller icon and type, never a cramped two-line squeeze ===== */
@media (max-width: 1024px) {
  div[data-r="ccnodep"][style] { display: flex !important; width: 100% !important; box-sizing: border-box; margin-top: 16px !important; padding: 10px 12px 10px 10px !important; gap: 10px !important; border-radius: 13px !important; text-align: left !important; }
  div[data-r="ccnodep"] > span:first-child[style] { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  div[data-r="ccnodep"] > span:last-child[style] { min-width: 0; flex: 1 1 auto; text-align: left !important; align-items: flex-start !important; }
  div[data-r="ccnodep"] > span:last-child > * { text-align: left !important; text-wrap: pretty; }
  div[data-r="ccnodep"] > span:last-child > *:first-child { font-size: 14px !important; line-height: 1.25 !important; }
  div[data-r="ccnodep"] > span:last-child > *:last-child { font-size: 12px !important; line-height: 1.4 !important; }
}

/* ===== promotion/home flash cards: flash trim pill on device, compact ===== */
@media (max-width: 1024px) {
  #flash span[style*="border-radius: 999px"][style*="padding: 4px 9px"] { font-size: 9.5px !important; padding: 2px 7px !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
}
@media (max-width: 480px) {
  #flash span[style*="border-radius: 999px"][style*="padding: 4px 9px"] { font-size: 9px !important; padding: 2px 6px !important; }
}

/* ===== Package cards (car-rental / home / class pages) on device: compact ===== */
@media (max-width: 1024px) {
  div[data-r="promocards"] > a > span:last-child[style] { gap: 3px !important; margin-top: 0 !important; }
  div[data-r="promocards"] > a > span:last-child > span[style] { font-size: 10.5px !important; line-height: 1.35 !important; }
}
@media (max-width: 480px) {
  div[data-r="promocards"] > a > span:last-child > span[style] { font-size: 10px !important; }
}

/* ===== Fleet card photo box collapsed to 0px on device =====
   The generic "flex rows wrap" rule turned the column-flex card into a
   wrapping column, and the aspect-ratio photo box (flex-shrink 1) was squeezed
   to nothing. Cards stay single-column and the photo box never shrinks. */
/* :not(#nx) lifts these above the generic "[style*=display: flex]:not(nowrap)"
   wrap rule, which otherwise wins on selector weight */
[data-r="fleetgrid"] > a:not(#nx), [data-r="clsgrid"] > a:not(#nx), [data-flash-slider] > a:not(#nx), #class-fleet a[style*="display: flex"]:not(#nx), div[data-r="flashrow"] > a:not(#nx) { flex-wrap: nowrap !important; }
/* the photo box's height comes from its width (aspect-ratio); the image inside
   is absolutely positioned, so if a phone rule stops it stretching across the
   card it shrinks to 0 wide, and so 0 tall */
[data-r="fleetimg"]:not(#nx), [data-r="flashimg"]:not(#nx) { flex-shrink: 0 !important; align-self: stretch !important; width: 100% !important; max-width: none !important; min-height: 1px; }

/* ===== affiliates.html: the "Visit Instagram" pill stays on one line (the
   site-wide device rule turns inline nowrap off) ===== */
@media (max-width: 1024px) {
  html body span[data-r="affcta"][style] { white-space: nowrap !important; }
  /* the header spacer (set by nav.js) already clears the fixed header, as on
     partners.html; the section only adds its own breathing room */
  html body section[data-r="affsec"][style] { padding-top: 32px !important; }
}

/* ===== Delivery & return credit tiles under the packages: 2x2 on phone ===== */
@media (max-width: 560px) {
  div[data-r="dlvtiers"][style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  div[data-r="dlvinfo"][style] { padding: 16px !important; }
}

/* ===== Category pages: delivery fee table under the packages uses the same stacked phone layout as promotion.html ===== */
@media (max-width: 1024px) {
  [data-r="dlvinfo"] div[data-r="dztbl"][style] { margin-top: 18px !important; border-radius: 14px !important; }
  [data-r="dlvinfo"] [data-r="dzhead"][style] { display: none !important; }
  [data-r="dlvinfo"] [data-r="dzbody"] > [data-r="dzrow"][style] {
    display: block !important;
    padding: 14px 16px !important;
  }
  [data-r="dlvinfo"] [data-r="dzrow"] > div:first-child[style] { font-size: 14px !important; line-height: 1.4 !important; }
  [data-r="dlvinfo"] [data-r="dzrow"] > div:first-child > span[style] { font-size: 11.5px !important; }
  [data-r="dlvinfo"] [data-r="dzrow"] > [data-r="dzfee"][style] {
    font-size: 12.5px !important;
    color: #9a948a !important;
    margin-top: 8px !important;
    padding-left: 19px;
  }
  [data-r="dlvinfo"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Zone fee "; }
  [data-r="dlvinfo"] [data-r="dzrow"] > [data-r="dzfee"]::after { content: " / way"; }
  [data-r="dlvinfo"] [data-r="dzrow"] > [data-r="dzd"][style] {
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
    width: calc(50% - 12px);
    margin: 10px 8px 0 0;
    padding-left: 19px;
    font-size: 14px !important;
  }
  [data-r="dlvinfo"] [data-r="dzlbl"] { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a948a; }
  [data-r="dlvinfo"] [data-r="dzrow"] > [data-r="dzfee"]::before { content: "Rate "; }
  [data-r="dlvinfo"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::before,
  [data-r="dlvinfo"] [data-r="dzrow"][style*="eaf7f5"] > [data-r="dzfee"]::after { content: ""; }
}
@media (max-width: 1024px) {
  [data-r="dlvinfo"] div[data-r="dztbl"][style] { margin-top: 4px !important; }
}

/* ===== Home hero highlight pills: smaller on phone ===== */
@media (max-width: 560px) {
  div[data-r="herochips"][style] { gap: 8px !important; margin-top: 20px !important; }
  div[data-r="herochips"] > span[style] { padding: 7px 12px !important; font-size: 13px !important; }
}

/* ===== Axia car page: interior photo grid on device ===== */
@media (max-width: 1024px) {
  section[data-r="axint"][style] { padding: 48px 16px 0 !important; }
  section[data-r="axint"] h2[style] { font-size: 26px !important; }
  div[data-r="axgrid"][style] { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important;
    grid-template-areas: 'dash dash' 'front back' 'boot boot' !important; gap: 8px !important; }
  div[data-r="axgrid"] > figure[style] { aspect-ratio: 4 / 3; border-radius: 14px !important; }
  div[data-r="axgrid"] > figure:nth-child(2), div[data-r="axgrid"] > figure:nth-child(3) { aspect-ratio: 1 / 1; }
  div[data-r="axgrid"] figcaption > span[style] { padding: 6px 10px !important; border-radius: 10px !important; }
}

/* ===== Inside gallery with 3 photos (7-seaters): dashboard on top, front + middle row below, no empty row ===== */
@media (max-width: 1024px) {
  div[data-r="axgrid"][data-ax3][style] { grid-template-areas: 'dash dash' 'front back' !important; }
}

/* ===== Inside gallery with 6 photos (7-seaters): two per row on device, all the same shape ===== */
@media (max-width: 1024px) {
  section[data-r="axint"] div[data-r="axgrid"][data-ax6][style] { grid-template-columns: 1fr 1fr !important; grid-template-areas: none !important; grid-auto-rows: auto !important; }
  div[data-r="axgrid"][data-ax6] > figure[style] { aspect-ratio: 4 / 3 !important; }
}

/* Home fleet highlight pills: one row on device, swipe if it overflows */
@media (max-width: 1024px) {
  [data-r="herochips"] { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: -20px; padding-right: 20px; }
  [data-r="herochips"]::-webkit-scrollbar { display: none; }
  [data-r="herochips"] > span { flex: 0 0 auto; font-size: 12px !important; padding: 6px 10px !important; gap: 6px !important; }
  [data-r="herochips"] > span > span { width: 6px !important; height: 6px !important; }
}

/* Mobile nav: no trim arrow beside car names */
@media (max-width: 1024px) { .nav-vmark { display: none !important; } }

/* Flash Sale slider on device: all cards in a row share one height (the shorter ones stretch to the tallest) */
@media (max-width: 1024px) {
  div[data-flash-slider][style] { align-items: stretch !important; grid-auto-rows: 1fr; }
  div[data-flash-slider][style] > a[style] { height: auto !important; align-self: stretch !important; }
  div[data-flash-slider] > a > [data-r="cardbody"] { flex: 1 1 auto; display: flex; flex-direction: column; }
  div[data-flash-slider] > a > [data-r="cardbody"] > :last-child { margin-top: auto; }
}


/* Flash sale cards on phone and tablet: one height for every card, price block never wraps */
@media (max-width: 1024px) {
  div[data-flash-slider][style], div[data-r="flashcard"] > div[style*="overflow-x: auto"]:not([data-no]):not([data-no2]){ grid-auto-rows: 1fr !important; align-items: stretch !important; }
  div[data-flash-slider] > a, div[data-r="flashcard"] a[style*="flex: 0 0 260px"]{ height: 100% !important; align-self: stretch !important; }
  div[data-flash-slider] > a > [data-r="flashimg"], div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > [data-r="flashimg"]{ height: 104px !important; aspect-ratio: auto !important; flex: 0 0 auto !important; }
  div[data-flash-slider] [data-r="cardprice"], div[data-r="flashcard"] [data-r="cardprice"] { white-space: nowrap !important; flex-shrink: 0 !important; }
  div[data-flash-slider] [data-r="cardprice"] > div, div[data-r="flashcard"] [data-r="cardprice"] > div { white-space: nowrap !important; }
  div[data-flash-slider] [data-r="cardname"], div[data-r="flashcard"] [data-r="cardname"], div[data-flash-slider] [data-r="cardbodytype"], div[data-r="flashcard"] [data-r="cardbodytype"] { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  div[data-flash-slider] [data-r="cardleft"], div[data-r="flashcard"] [data-r="cardleft"] { flex: 1 1 0 !important; min-width: 0 !important; }
  div[data-flash-slider] [data-r="cardspecs"], div[data-r="flashcard"] [data-r="cardspecs"] { margin-top: auto !important; }
}

/* Fleet cards: every card matches the tallest one (all widths) */
div[data-r="fleetgrid"] { grid-auto-rows: 1fr !important; align-items: stretch !important; }
div[data-r="fleetgrid"] > a { height: 100% !important; align-self: stretch !important; }
div[data-r="fleetgrid"] [data-r="cardspecs"] { margin-top: auto !important; }
div[data-r="fleetgrid"] [data-r="cardprice"] { white-space: nowrap !important; }


/* Package cards on device: nothing squashes into the next line, and the discount row is one fixed height so the delivery pills line up across cards */
@media (max-width: 1024px) {
  div[data-r="promocards"] > a { overflow: visible; }
  div[data-r="promocards"] > a > * { flex-shrink: 0 !important; }
  div[data-r="promocards"] > a > span:nth-of-type(2) { min-height: 62px !important; justify-content: flex-start !important; }
  div[data-r="promocards"] > a > span:nth-of-type(2) > span:first-child { line-height: 1.2 !important; }
}

/* Flash sale cards on device: close the gap between the name block and the trim pill, as on fleet cards */
@media (max-width: 1024px) {
  div[data-flash-slider] [data-r="cardprice"][style] { margin-bottom: -13px !important; }
  div[data-flash-slider] [data-r="trims"] { margin-top: -6px !important; }
}

/* Package cards (home, car-rental, class pages): same card as the promo page, scaled for device */
@media (max-width: 1024px) {
  div[data-r="promocards"] > a [data-r="pkicon"] { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; background-size: 34px 34px !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] { gap: 9px !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] > div > div:first-child { font-size: 10px !important; line-height: 1.2 !important; }
  div[data-r="promocards"] > a > div:nth-of-type(2) { min-height: 0 !important; }
}

/* Package cards on device: 4 columns x 2 rows, slide across; compact cards */
@media (max-width: 1024px) {
  div[data-r="promocards"][style] {
    grid-template-columns: none !important; grid-template-rows: repeat(2, 1fr) !important; grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 30px) / 4) !important;
    gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important;
    margin: -10px -16px -14px !important; padding: 10px 16px 18px !important; scroll-padding-left: 16px; max-width: none !important;
  }
  div[data-r="promocards"] > a[style] { padding: 14px 14px 12px !important; border-radius: 16px !important; min-width: 0 !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] { flex-direction: row !important; align-items: center !important; gap: 9px !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] > div { display: block !important; min-width: 0 !important; flex: 1 1 auto !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] > div > div:first-child { font-size: 10px !important; line-height: 1.25 !important; margin: 0 !important; }
  div[data-r="promocards"] > a [data-r="pkhead"] > div > div:last-child { font-size: 24px !important; margin: 2px 0 0 !important; }
  div[data-r="promocards"] > a [data-r="pkicon"] { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; background-size: 34px 34px !important; }
  div[data-r="promocards"] > a > div:nth-of-type(2) { margin-top: 10px !important; gap: 6px !important; }
  div[data-r="promocards"] > a > div:nth-of-type(2) > span:first-child { font-size: 15px !important; }
  div[data-r="promocards"] > a > div:last-child { margin-top: 10px !important; padding-top: 10px !important; min-height: 20px !important; }
  div[data-r="promocards"] > a > div:last-child > span { font-size: 10px !important; line-height: 1.3 !important; white-space: normal !important; }
}
@media (max-width: 760px) { div[data-r="promocards"][style] { grid-auto-columns: 36% !important; } }
@media (max-width: 480px) { div[data-r="promocards"][style] { grid-auto-columns: 52% !important; } }

/* Package cards on device: no icon, label and days start at the left edge */
@media (max-width: 1024px) {
  div[data-r="promocards"] > a [data-r="pkicon"] { display: none !important; }
}

/* Flash sale cards: fuel pill (EV / Hybrid / Petrol / Diesel) sits level with the SAVE pill, name block starts below both */
[data-r="flashimg"] ~ [data-r="cardbody"] { padding-top: 38px !important; }
[data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardleft"] { position: static !important; }
[data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardev"] { position: absolute !important; left: 13px !important; top: 10px !important; bottom: auto !important; margin: 0 !important; }
[data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardbrand"] { padding-right: 0 !important; }
[data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardprice"] { margin-top: 14px !important; }
@media (max-width: 1024px) {
  div[data-flash-slider] [data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardprice"][style] { margin-top: 14px !important; margin-bottom: 0 !important; }
  div[data-flash-slider] [data-r="flashimg"] ~ [data-r="cardbody"] [data-r="trims"] { margin-top: 0 !important; }
}

div[data-flash-slider] > a > [data-r="cardbody"][style], div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > div[data-r="cardbody"][style]{ padding-top: 38px !important; }

div[data-flash-slider] > a > [data-r="cardbody"][style], div[data-r="flashcard"] a[style*="flex: 0 0 260px"] > div[data-r="cardbody"][style]{ padding-top: 31px !important; }
[data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardprice"] { margin-top: 9px !important; }
div[data-flash-slider] [data-r="flashimg"] ~ [data-r="cardbody"] [data-r="cardprice"][style] { margin-top: 9px !important; }

/* Package tiles on device: 2 columns x 4 rows, swipe sideways when there are more */
@media (max-width: 1024px) {
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3) {
    display: grid !important; grid-auto-flow: row !important;
    grid-template-rows: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important; gap: 8px !important;
    overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x mandatory !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    padding: 10px 0 4px !important;
  }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3)::-webkit-scrollbar { display: none; }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3) > button {
    scroll-snap-align: start !important; min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "label" "sub" "total" "dlv" !important; padding: 11px 12px !important;
  }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3) > button > [data-t="total"] { text-align: left !important; margin-top: 6px; font-size: 17px !important; }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3) > button > [data-t="dlv"][style] { flex-direction: column !important; align-items: flex-start !important; }
  html body div[data-r="pkgrow"][style]:not(#nx):not(#nx2):not(#nx3) > button > [data-t="dlv"] > span:first-child { white-space: normal !important; }
}

/* Insurance excess comparison (Standard vs With the add-on): keep 2 columns on device */
@media (max-width: 1024px) {
  html body div[data-r="addexcess"][style]:not(#nx):not(#nx2) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body div[data-r="addexcess"][style]:not(#nx):not(#nx2) > div { min-width: 0 !important; width: auto !important; }
}

/* Spec / Features accordions on device: arrow stays on the title row, right side */
@media (max-width: 1024px) {
  html body summary[data-r="specsum"][style], html body summary[data-r="safetysum"][style] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
  html body summary[data-r="specsum"][style] > span:first-child, html body summary[data-r="safetysum"][style] > span:first-child { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  html body [data-r="specchev"][style], html body [data-r="safetychev"][style] { flex: 0 0 auto !important; margin: 0 0 0 auto !important; width: auto !important; align-self: center !important; }
}

/* Home: discounts H2 above the flash sale card, sized like the fleet title on device */
@media (max-width: 1024px) { [data-r="flashh2"] { font-size: 28px !important; line-height: 1.05 !important; margin-bottom: 20px !important; } }
@media (max-width: 600px) { [data-r="flashh2"] { font-size: 24px !important; } }

/* Car pages: date calendar and time list open INSIDE the "Your dates / Tarikh anda" box, under Pick-up & Drop-off, not as a floating popup */
@media (min-width: 1025px) {
  html body [data-r="ptinline"] [data-r="ptpop"][style] { order: 1; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 12px 0 0 !important; box-shadow: none !important; border: 1px solid #ece9e1 !important; border-radius: 12px !important; z-index: 1 !important; padding: 12px !important; }
  html body [data-r="ptinline"] [data-r="ptfee"][style] { order: 3; }
  /* calendar sits right under Mula / Tamat, above Ambil & Pulang */
  html body [data-r="ptinline"] > div > span:has([data-nx-addr]) { order: 2; }
}

/* Inside grid with 5 photos (4x4 pickups): dashboard spans two rows on desktop, full width on device */
div[data-r="axgrid"][data-ax6] > figure:first-child:nth-last-child(5) { grid-row: span 2; }
@media (max-width: 1024px) {
  div[data-r="axgrid"][data-ax6] > figure:first-child:nth-last-child(5)[style] { grid-row: auto !important; grid-column: 1 / -1 !important; }
}

/* EV strip cards: flash-card nth-child rules (inline, 640px) hit the spec row; keep all three specs equal */
@media (max-width: 640px) {
  div[data-ev-slider][data-r="evgrid"][data-flash-slider] > a > div[data-r="cardbody"] > div[data-r="cardspecs"][style] > span[style]:nth-child(n) { font-size: 10.5px !important; gap: 3px !important; font-weight: 400 !important; line-height: 1.2 !important; }
  div[data-ev-slider][data-r="evgrid"][data-flash-slider] > a > div[data-r="cardbody"] > div[data-r="cardspecs"][style] > span[style]:nth-child(n) > img { width: 16px !important; height: 16px !important; }
  div[data-ev-slider][data-r="evgrid"][data-flash-slider] > a > div[data-r="cardbody"] > div[data-r="cardspecs"][style] { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important; justify-content: flex-start !important; }
  div[data-ev-slider][data-r="evgrid"][data-flash-slider] > a > div[data-r="cardbody"] > div[data-r="cardspecs"][style] > span[style]:nth-child(n) { flex: 0 0 auto !important; width: auto !important; order: 0 !important; margin: 0 !important; white-space: nowrap !important; }
}

/* Why NEXX on device: 3 x 3 grid (no side scroller); icon above title, body text hidden on phones */
@media (max-width: 1024px) {
  div[data-r="whygrid"][style]:not([data-no]):not([data-no2]) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; overflow: visible !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  div[data-r="whygrid"][style]:not([data-no]):not([data-no2]) > div[style] { min-width: 0 !important; width: auto !important; }
}
@media (max-width: 640px) {
  div[data-r="whygrid"][style]:not([data-no]):not([data-no2]) { gap: 8px !important; grid-auto-columns: auto !important; }
  div[data-r="whygrid"] > div[style] { padding: 14px 8px !important; border-radius: 14px !important; align-items: center !important; text-align: center !important; justify-content: flex-start !important; }
  div[data-r="whyface"][style] { flex-direction: column !important; gap: 8px !important; margin-bottom: 0 !important; }
  div[data-r="whyface"] > span[style] { width: 38px !important; height: 38px !important; }
  div[data-r="whygrid"] h3[style] { font-size: 12.5px !important; line-height: 1.25 !important; text-wrap: balance; }
  div[data-r="whygrid"] > div > p[style] { display: none !important; }
}