.mp{--a:#bf0f0f;--a2:#a80606;--ink:#14171c;--mut:#5b6472;--line:#e3e6ea;--hair:#eceef1;--rule:#7d8697;
--paper:#ffffff;--sand:#f4f2ef;--coal:#14171c;--save:#0d7a3e;
/* THE PAGE WAS TOO BIG, and it was one number in four places rather than a
   layout problem. Every band paid up to 104px of padding top AND bottom, so two
   bands cost 208px of nothing between them; a 15ch cap threw every section head
   onto three lines; and the lede ran 19px at 1.72 line-height across 44ch, which
   is a pull quote, not a standfirst. The measured result was a page a shopper
   scrolls for a long time to learn very little.
   The type scale is trimmed, not shrunk into illegibility: the smallest body
   text on the page is unchanged at 14.5px and the tap targets are untouched. */
--d1:clamp(30px,4.1vw,60px);--d2:clamp(24px,2.5vw,36px);--d3:clamp(21px,1.85vw,29px);--d4:17.5px;--b:16.5px;--s:14.5px;--xs:12.5px;
--sp:clamp(40px,4.4vw,68px);--pill:999px;--ind:clamp(16px,1.9vw,26px);
--sh:0 18px 44px rgba(12,16,22,.16),0 2px 6px rgba(12,16,22,.06);
--ff:"Museo Sans","Nunito Sans","Avenir Next",Avenir,"Segoe UI",Roboto,system-ui,sans-serif;
font-family:var(--ff);color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mp *{box-sizing:border-box}
.mp img{max-width:100%;display:block}

/* Bands. Full-bleed, with real vertical rhythm. */
.mp-band{padding:var(--sp) 20px}
.mp-band--sand{background:var(--sand)}
.mp-band--coal{background:var(--coal);color:#f2f4f7}
.mp-band--coal .mp-kicker{color:#b9c0cc}
.mp-band--coal .mp-lede{color:#cbd2dc}
.mp-band--coal .mp-h2{color:#ffffff;border-left-color:#8b95a5}
.mp-in{max-width:1200px;margin:0 auto}

/* SECTION HEADS (comp: "AUDI PITTSBURGH SPECIAL FINANCE PROGRAMS", "WHY BUY AT
   AUDI PITTSBURGH"). Left-aligned at every width, bold uppercase, set in two or
   three short lines, with a thin vertical GREY rule running down the left of the
   heading only. Not centred, and no short red bar underneath: that was the 2016
   comp and it is gone.

   The existing blocks emit <hr class="mp-rule"> after the h2 because that is what
   the old system wanted. The rule is now a border on the heading itself, so the
   emitted <hr> is neutralised here rather than being ripped out of four other
   files. */
.mp-head{text-align:left;max-width:none;margin:0 0 calc(var(--sp) * .42)}
.mp-kicker{font-size:var(--xs);letter-spacing:.16em;text-transform:uppercase;color:var(--a);margin:0 0 12px;
font-weight:700;padding-left:var(--ind)}
.mp-h2{font-size:var(--d3);line-height:1.28;letter-spacing:0;text-transform:uppercase;margin:0;font-weight:800;
max-width:20ch;padding-left:var(--ind);border-left:3px solid var(--rule)}
.mp-h2 em{font-style:normal;font-weight:800;color:var(--a)}
.mp-rule{display:none}
.mp-lede{font-size:var(--d4);line-height:1.6;color:var(--mut);margin:14px 0 0;max-width:58ch;padding-left:var(--ind)}

.mp-h3{font-size:var(--d4);line-height:1.28;letter-spacing:.01em;text-transform:uppercase;margin:0 0 10px;font-weight:800}
.mp-p{font-size:var(--b);line-height:1.66;margin:0 0 12px;max-width:66ch}
.mp-sm{font-size:var(--s);line-height:1.62;color:var(--mut)}
.mp-fine{font-size:var(--xs);line-height:1.58;color:var(--mut)}

/* BUTTONS ARE PILLS (comp: the red "VIEW INVENTORY" in the hero). Fully rounded,
   red, white uppercase label with real letterspacing. Cards stay square: the
   comp rounds the button and nothing else, which is what makes the button read
   as the one thing you are meant to press. */
.mp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 38px;
background:var(--a);color:#fff;text-decoration:none;font-weight:800;font-size:var(--s);letter-spacing:.09em;
text-transform:uppercase;border:0;border-radius:var(--pill);cursor:pointer;transition:background .15s}
.mp-btn:hover{background:var(--a2)}
.mp-btn--ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.mp-btn--ghost:hover{background:rgba(0,0,0,.06)}
.mp-btn:focus-visible,.mp-lnk:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-lnk{color:var(--a);font-weight:800;text-decoration:none;font-size:var(--s);letter-spacing:.05em;text-transform:uppercase}
.mp-lnk:hover{text-decoration:underline}

/* EQUAL GRIDS. The comp is built on them: 4-up program tiles, 2-up payment
   columns, 2x4 why-buy, 3-up hero stat cells. The old system banned them on
   principle and was simply wrong about the reference. */
.mp-eq{display:grid;gap:clamp(16px,2.2vw,28px)}
@media(min-width:640px){.mp-eq--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){
  .mp-eq--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp-eq--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:640px) and (max-width:899.98px){
  .mp-eq--3,.mp-eq--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Splits, for the bands the comp really does split unevenly: the why-buy band is
   a narrow text column against a wide image, and the offer card is image against
   detail. Kept as tools, no longer as doctrine. */
.mp-split{display:grid;gap:clamp(24px,3.2vw,52px)}
@media(min-width:900px){
  .mp-split--7-5{grid-template-columns:7fr 5fr;align-items:center}
  .mp-split--5-7{grid-template-columns:5fr 7fr;align-items:center}
  .mp-split--8-4{grid-template-columns:8fr 4fr;align-items:start}
}

/* --- HERO -----------------------------------------------------------------
   Full-bleed ink band with the OEM studio render standing in it at real scale.

   THE PLATE IS THE VEHICLE, NOT THE FILE. The 1500x750 frame carries the truck
   between x 226..1168 and y 142..656 and transparent air everywhere else, so the
   plate element is sized to the vehicle's own box (942x514) and the
   <img> is pushed out beyond it by exactly the transparent margins: 159.24% wide,
   23.99% to the left, 27.63% up. The band clips the overhang. Every
   number after this one is therefore about the vehicle a person can see.

   THE CAP IS 942px, which is the vehicle's width when the 1500px file is served
   1:1. min(942px, 50.24%) means the file is asked for 1500px at 1920 and never
   for more, and downsamples below that. There is no viewport where it upscales. */
.mp-hero{--pad:clamp(20px,5vw,40px);--gut:max(var(--pad),calc((100% - 1200px) / 2 + var(--pad)));
--artw:min(942px,86%);
position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
background:var(--coal);color:#fff;padding:0 0 calc(var(--sp) * .38)}
/* The copy grows so the stat card falls to the FOOT of the band however tall the
   band gets. A fixed top margin cannot do that, and the card drifting up away
   from the vehicle is the signature move quietly coming apart. */
/* THE HERO WAS A WHOLE SCREEN SAYING THREE THINGS.
   Measured off the live page rather than argued about: a 78px headline broken
   over two lines by a 12ch cap, a 24px standfirst set at 1.85 line-height and
   capped at 30ch so it broke over three widely spaced lines, then 38px before
   the button. The result was most of a 1440x900 viewport of near-empty ink with
   the truck pushed under the fold.
   The proportions are unchanged: display still dominates, the standfirst is
   still the quiet second voice, the CTA is still the one red thing. Every step
   is simply smaller, and the standfirst is allowed a wider measure so it sets in
   two lines instead of three. */
.mp-hero-copy{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:calc(var(--sp) * .5) var(--gut) 0}
.mp-hero-title{margin:0;max-width:14ch;font-size:var(--d1);line-height:1.04;letter-spacing:-.015em;
font-weight:800;text-transform:uppercase;color:#fff}
/* The research half of the h1: the model year above the name and what the page
   answers below it, set as quiet type so the model name keeps the display voice. */
.mp-hero-pre,.mp-hero-tail{display:block;text-transform:none;letter-spacing:0;color:#e6e9ee}
.mp-hero-pre{margin:0 0 6px;font-size:clamp(15px,1.3vw,19px);font-weight:700;line-height:1.3}
.mp-hero-tail{margin:12px 0 0;max-width:22ch;font-size:clamp(17px,1.6vw,23px);font-weight:600;line-height:1.3}
.mp-hero-sub{margin:16px 0 0;max-width:46ch;font-size:clamp(16px,1.25vw,19px);line-height:1.58;
font-weight:400;color:#e6e9ee}
.mp-hero-facts{display:flex;flex-wrap:wrap;gap:6px 0;margin:12px 0 0;padding:0;list-style:none;max-width:52ch;
font-size:clamp(14px,1.05vw,16px);line-height:1.5;font-weight:600;color:#e6e9ee}
/* The separator trails each item, so a wrapped line never starts with a dot. */
.mp-hero-facts li:not(:last-child)::after{content:"\00b7";padding:0 .6em;font-weight:400}
.mp-hero-cta{margin:clamp(20px,2.2vw,28px) 0 0}

/* The dot rail, far left, first dot live. Decorative in weight, real in
   function: every dot is an anchor to a section that exists. */
.mp-hero-rail{position:absolute;z-index:3;left:max(14px,calc(var(--gut) * .22));top:50%;transform:translateY(-50%);
display:none;flex-direction:column;gap:16px}
.mp-hero-dot{width:9px;height:9px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px #fff;
background:transparent;display:block}
.mp-hero-dot--on{background:var(--a);box-shadow:none}
.mp-hero-dot:focus-visible{outline:3px solid var(--a);outline-offset:4px}
.mp-hero-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}

/* THE PLATE. Stacked below the copy at mobile, centred; absolutely placed at
   desktop. Either way it is the vehicle's bounding box and the file hangs out of
   it, so it carries no background of its own: the render is a cutout and the ink
   band is the ground it stands on. */
.mp-hero-plate{position:relative;z-index:1;width:var(--artw);aspect-ratio:942/514;
margin:clamp(26px,4vw,44px) auto 0;line-height:0}
/* The child selector is not decoration. tokens.baseCss() carries a rule on
   .mp img with max-width:100%, which is specificity (0,1,1) and beats a bare
   .mp-hero-img at (0,1,0), so the file gets clamped to the vehicle box and the
   truck renders at 63% of the size the layout believes it is. Silently: every
   assertion about caps and upscaling still passes, it is just small. */
.mp-hero-plate .mp-hero-img{position:absolute;left:-23.99%;top:-27.63%;
width:159.24%;max-width:none;height:auto}
/* A CUTOUT NEEDS A GROUND. The render's own contact shadow is dark and vanishes
   on a dark band, which leaves the truck hovering, and an Onyx Black unit would
   disappear into the ink outright. So the vehicle stands in a soft pool of light
   instead: it reads as a lit stage rather than a sticker, and it holds every one
   of the nine body colours. Painted before the image, so it sits behind it. */
.mp-hero-plate::before{content:"";position:absolute;left:-9%;right:-9%;bottom:-7%;height:52%;
background:radial-gradient(60% 100% at 50% 100%,rgba(215,228,245,.15),rgba(215,228,245,0) 72%);
pointer-events:none}

/* THE DESIGNED ABSENT STATE. Two units cannot be colour-matched and get no
   render at all. DESIGN-AC's ruling for imagery we do not have is a typographic
   substitute, never an approximation, so the model name fills the space the
   vehicle would have taken, ghosted into the ink and clipped by the band. */
.mp-hero-ghost{position:absolute;z-index:0;right:calc(var(--pad) * -.5);bottom:-.18em;margin:0;
font-size:clamp(96px,17vw,300px);line-height:.78;font-weight:800;letter-spacing:-.04em;
text-transform:uppercase;color:rgba(255,255,255,.052);white-space:nowrap;pointer-events:none;
user-select:none}

/* THE SIGNATURE MOVE: a white card that runs out over the photograph. At mobile
   it laps the plate's bottom edge; at desktop it laps its left flank. */
.mp-hero-card{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);
margin:-34px 32px 0 var(--gut);padding:0;list-style:none;background:var(--paper);color:var(--ink);box-shadow:var(--sh)}
.mp-hero-cell{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 20px;
border-top:1px solid var(--hair)}
.mp-hero-cell:first-child{border-top:0}
.mp-hero-ico{flex:0 0 auto;color:var(--a);line-height:0}
.mp-hero-txt{display:flex;flex-direction:column;min-width:0}
.mp-hero-dt{font-size:var(--s);line-height:1.3;color:var(--mut)}
.mp-hero-dd{font-size:clamp(22px,2vw,30px);line-height:1.18;font-weight:800;color:var(--a);
letter-spacing:-.01em;overflow-wrap:anywhere}
/* MSRP is struck in INK, not in grey: the comp keeps the number readable and
   lets the line through it do the work. */
.mp-hero-dd--was{color:var(--ink);text-decoration:line-through;text-decoration-thickness:2px}
.mp-hero-dd--now{color:var(--a)}

/* With no render there is no plate for the card to lap, so its negative margin
   pulled it up over the red pill instead and hid the CTA on phones. */
@media(max-width:899px){.mp-hero--noart .mp-hero-card{margin-top:28px}}
@media(min-width:560px){
  .mp-hero-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp-hero-cell{border-top:0;border-left:1px solid var(--hair)}
  .mp-hero-cell:first-child{border-left:0}
}
@media(min-width:980px){
  .mp-hero-rail{display:flex}
  /* THE BAND IS A COMPOSITION, SO IT NEEDS ROOM TO BE ONE. The comp's hero is
     about 1.93:1. Left to its content this band comes out at 2.14:1 and the
     vehicle's roof arrives under the second line of the headline. */
  .mp-hero{--artw:min(942px,50.24%);
  /* the vehicle's own left edge, in band coordinates */
  --artx:calc(96% - var(--artw));
  /* how far the white card runs out over the vehicle. Constant by construction */
  --lap:180px;
  /* THE FLOOR THAT WAS HOLDING THE GAP OPEN.
     52vw is 749px at 1440 and the band's own content now comes to about 590px,
     so the difference was empty ink: the copy stops after the button and the
     vehicle is pinned to the BOTTOM of the band, which put the whole composition
     a third of a screen lower than it needed to be. The floor exists so the band
     stays a composition rather than collapsing onto its text, so it stays, at a
     height the content actually reaches. */
  min-height:clamp(500px,39vw,640px)}
  .mp-hero-plate{position:absolute;z-index:1;right:4%;bottom:4%;margin:0}
  /* THE SIGNATURE MOVE, SOLVED RATHER THAN TUNED. The card is pinned to --gut on
     the left while the vehicle is placed off the band's RIGHT edge, so the two
     drift apart as the viewport grows. A fixed 860px card lost contact somewhere
     around 1750px and the overlap silently died on exactly the wide monitors a
     dealer's own staff use, with every other assertion still green. Deriving the
     width from the vehicle's own left edge makes the lap the SAME 180px at 980,
     at 1440, at 1920 and at 2560, because it is the one thing being asked for. */
  .mp-hero-card{width:calc(var(--artx) + var(--lap) - var(--gut));
  margin:clamp(36px,4vw,60px) 0 0 var(--gut)}
  /* With no vehicle there is nothing to lap, so the card takes the copy column's
     own measure instead of reaching for something that is not there. */
  .mp-hero--noart .mp-hero-card{width:min(860px,calc(100% - var(--gut) * 2))}
}

/* --- OFFER CARD -----------------------------------------------------------
   A bordered white box on paper. Vehicle at the left on white, name and payment
   columns at the right. Two EQUAL columns, which is what the comp does. */
.mp-offer{padding:calc(var(--sp) * .82) 20px}
/* align-items:center against a body column made tall by three open disclosures
   is what left the truck marooned in white with nothing above or below it. The
   art now sits at the TOP of its column, level with the vehicle's name, which is
   the relationship the card is actually about. */
.mp-offer-card{display:grid;gap:clamp(18px,2.4vw,40px);align-items:start;max-width:1200px;margin:0 auto;
padding:clamp(22px,2.6vw,36px);background:var(--paper);border:1px solid var(--line)}
/* Same vehicle-box treatment as the hero, and here overflow:hidden is load
   bearing rather than cosmetic: the file hangs ~24% of the column's width past
   its own left edge, and at 390 that is a real horizontal scrollbar on the whole
   document unless this element clips it. */
.mp-offer-art{position:relative;min-width:0;width:100%;max-width:942px;margin:0 auto;
aspect-ratio:942/514;overflow:hidden}
.mp-offer-art .mp-offer-img{position:absolute;left:-23.99%;top:-27.63%;
width:159.24%;max-width:none;height:auto;margin:0}
.mp-offer-body{min-width:0}
/* TWO WEIGHTS AND TWO COLOURS IN ONE LINE (comp: "2019 Q5" red bold against
   "2.0T Quattro Premium" grey regular). This is where the 2016 comps' two-weight
   headline pattern actually survives in the 2019 system. */
.mp-offer-name{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 16px;margin:0 0 clamp(22px,2.6vw,34px)}
.mp-offer-model{font-size:var(--d2);line-height:1.05;font-weight:800;letter-spacing:-.02em;
text-transform:uppercase;color:var(--a)}
.mp-offer-trim{font-size:var(--d4);line-height:1.35;font-weight:400;color:var(--mut);max-width:16ch;padding-top:.2em}
/* TWO FIGURES, NOT TWO EQUALS. The card set MSRP and the advertised price at
   the same size in two matched columns, so the eye had to read both to find out
   which one it could actually pay. The advertised price is the answer; the MSRP
   is the number it is measured against. The struck figure is now a step down in
   size and muted, which is also how the inventory cards and the trim table
   already set the same pair. */
.mp-offer-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px);
margin:0;padding:0;list-style:none}
.mp-offer-col{min-width:0}
.mp-offer-lab{margin:0;font-size:var(--xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--a)}
/* The currency mark belongs TO the numeral. At var(--d4) beside a var(--d2)
   figure with an 8px gap it read as a separate small word sitting next to a big
   one. It is now sized off the numeral itself and set tight against it. */
.mp-offer-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;margin:6px 0 0}
.mp-offer-cur{font-size:.56em;font-weight:800;line-height:1;color:inherit;transform:translateY(-.08em)}
.mp-offer-amt{font-size:1em;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:inherit}
.mp-offer-fig{font-size:var(--d2);color:var(--ink)}
.mp-offer-fig--was{font-size:var(--d3)}
/* The comp sets a term beside the numeral ("$ 499 39 Mo. Lease"). There is no
   term to set any more: a total has no period attached to it, and the only
   figures this card may publish are totals. The slot is gone rather than left
   styled and unreachable. */
/* The MSRP column is the number being beaten, so it is struck exactly the way
   the hero strikes it: the line does the work, the figure stays readable. */
.mp-offer-fig--was{text-decoration:line-through;text-decoration-thickness:2px;color:var(--mut)}
.mp-offer-fig--was .mp-offer-cur,.mp-offer-fig--was .mp-offer-amt{color:var(--mut)}
.mp-offer-terms{margin:8px 0 0;font-size:var(--s);line-height:1.5;color:var(--mut);max-width:40ch}
/* THE DESIGNED ABSENT STATE: no advertisable offer, so no figure and no
   placeholder where one would have been. The card the dealer would print. */
.mp-offer-absent{margin:0;font-size:var(--d4);line-height:1.7;color:var(--mut);max-width:44ch}
.mp-offer-ask{margin:clamp(22px,2.6vw,30px) 0 0}
/* GREEN IS FOR SAVINGS AND FOR NOTHING ELSE. */
/* The saving is a result, so it reads as one: a quiet rule above it and the
   figure carrying the weight rather than the words in front of it. */
.mp-offer-save{margin:clamp(16px,1.8vw,22px) 0 0;padding:clamp(14px,1.6vw,18px) 0 0;
border-top:1px solid var(--hair);font-size:var(--s);line-height:1.4;color:var(--mut)}
.mp-offer-saveamt{font-size:var(--d4);font-weight:800;color:var(--save)}
.mp-offer-fine{margin:clamp(16px,2vw,24px) 0 0;padding:clamp(12px,1.6vw,18px) 0 0;border-top:1px solid var(--hair)}
/* Each figure's own text under its own heading, so a claim keeps its qualifier
   even though the three controls became one. */
.mp-offer-disc-body{padding:2px 0 6px}
.mp-offer-disc-h{margin:14px 0 4px;font-size:var(--xs);font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink)}
.mp-offer-disc-h:first-child{margin-top:4px}
.mp-offer-disc-p{margin:0;font-size:var(--xs);line-height:1.55;color:var(--mut)}
/* DISCLOSURES ARE REACHABLE, NOT DOMINANT. The text is legally required and is
   NOT cut. It collapses, and when opened it scrolls inside its own box so it can
   never push the card taller than the photograph beside it. */
.mp-offer-disc{font-size:var(--xs);line-height:1.55;color:var(--mut);overflow-wrap:anywhere}
/* THE CHEVRON BELONGS TO THE LAST WORD, NOT TO THE ROW.
   This summary was a flex container, which is fine while the label fits on one
   line and wrong the moment it does not. At 390 the middle label wraps, the
   anonymous text run takes the full width, and the chevron is left floating
   alone at the right edge of a second line: three controls, one of which reads
   as a rendering fault. Setting it inline puts the mark immediately after the
   last word at every width, so a wrapped label still reads as one control.
   The row is 44px so it is a real tap target on a phone. */
.mp-offer-disc>summary{cursor:pointer;list-style:none;display:block;padding:11px 0;min-height:44px;
font-size:var(--xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mp-offer-disc>summary::-webkit-details-marker{display:none}
.mp-offer-disc>summary::after{content:"";display:inline-block;width:7px;height:7px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
margin:0 0 3px 9px;vertical-align:middle;transition:transform .15s}
.mp-offer-disc[open]>summary::after{transform:rotate(-135deg);margin-bottom:-1px}
.mp-offer-disc>summary:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-offer-disc>p{margin:4px 0 12px;max-height:180px;overflow-y:auto;font-size:var(--xs);
line-height:1.6;color:var(--mut)}
.mp-offer-foot{margin:14px 0 0;font-size:var(--xs);line-height:1.6;color:var(--mut);overflow-wrap:anywhere}
@media(min-width:640px){
  .mp-offer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
  .mp-offer-card{grid-template-columns:5fr 7fr}
}

/* --- ESTIMATE A PAYMENT ----------------------------------------------------
   White cards on the sand band, hairline bordered, exactly as the 2019 comp
   sets a figure block: a small red uppercase label, a large ink numeral, the
   conditions in grey underneath, then a divider and the disclosure.

   IT READS AS A CALCULATOR RATHER THAN AN OFFER because of two decisions in the
   type, not because of a caption. The numeral is set at --d3 rather than at the
   offer card's --d2, so nothing here can out-shout an advertised price two
   bands above it; and the word "estimate" sits on the figure's own baseline in
   a bordered pill, at the same optical weight as the currency mark. */
.mp-est{background:var(--sand)}
.mp-est-veh{margin:0 0 clamp(20px,2.4vw,28px);font-size:var(--s);line-height:1.5;font-weight:800;
letter-spacing:.02em;color:var(--ink);padding-left:var(--ind)}

/* auto-fit rather than a fixed count: this band carries three cards on a used
   unit and five on a new one, and a hard 4-up leaves a lone card stranded on
   the second row. min(100%,270px) is what stops the track from being wider than
   the viewport at 390, which is a document-level horizontal scrollbar. */
/* WAYS TO BUY. Small, dense and above the figures: this is orientation, not the
   main event, and it earns four short cards rather than four tall ones. */
.mp-est-ways{display:grid;gap:12px;margin:0 0 clamp(24px,2.6vw,34px);padding:0;list-style:none;
grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.mp-est-way{min-width:0;padding:16px 18px;background:var(--paper);border:1px solid var(--line)}
.mp-est-way-t{margin:0 0 6px;font-size:var(--xs);letter-spacing:.13em;text-transform:uppercase;
font-weight:800;color:var(--a)}
.mp-est-way-b{margin:0;font-size:var(--s);line-height:1.5;color:var(--ink)}
.mp-est-way-a{display:inline-block;margin:9px 0 0;font-size:var(--xs);font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:underline}
.mp-est-way-a:hover{color:var(--a)}

/* 248px let four cards fit and dropped the fifth onto a row of its own, which
   read as a mistake. This line computes five to a row at the 1200 container and
   still falls back to two, then one, on the way down. */
/* EACH CARD IS ITS OWN HEIGHT.
   A grid stretches its items to the tallest row by default, and a lease card
   carries three inputs a finance card does not (residual, money factor,
   acquisition fee). The finance cards were therefore padded out with about
   130px of nothing between the doc-fee line and the disclosure control, with
   the control's own hairline rule floating in the middle of it. Three visible
   holes in a row, and the taller the leases got the worse it looked.
   align-items:start lets a card end where its content ends. The control no
   longer needs pinning to the foot either, so margin-top:auto comes off with
   it: pinning is what turned the slack into a gap in the first place. */
.mp-est-grid{display:grid;gap:clamp(12px,1.5vw,18px);margin:0;padding:0;list-style:none;
align-items:start;
grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.mp-est-card{min-width:0;display:flex;flex-direction:column;
padding:clamp(16px,1.8vw,22px);background:var(--paper);border:1px solid var(--line)}
/* Two lines are RESERVED for the label, because one of these products is called
   "zero-down lease" and wraps while the others do not. Without the reservation
   the figures in a row of cards sit at three different heights, which is the
   single thing that makes a grid of cards read as assembled. */
.mp-est-lab{margin:0;font-size:var(--xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;
line-height:1.45;color:var(--a)}
@media(min-width:640px){.mp-est-lab{min-height:calc(var(--xs) * 2.9)}}

/* THE FIGURE AND THE WORD ARE ONE ELEMENT. There is no rule here that can hide
   the tag and leave the numeral: they share a flex line and a baseline. The
   currency mark is tight against the numeral and the spacing is carried on the
   two pieces AFTER it, so the currency and the numeral read as one figure
   rather than as two. A worked example does not belong in this comment: the
   stylesheet ships in the document, and the page-wide scan for withheld
   payment figures reads every byte of it, correctly. */
.mp-est-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin:10px 0 0}
.mp-est-cur{font-size:var(--d4);font-weight:800;line-height:1;color:var(--ink)}
.mp-est-amt{font-size:var(--d3);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.mp-est-per{font-size:var(--d4);font-weight:800;line-height:1;color:var(--mut);margin-left:3px}
.mp-est-tag{font-size:var(--xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--mut);padding:4px 10px;margin-left:10px;border-radius:var(--pill);
box-shadow:inset 0 0 0 1px var(--rule);line-height:1;white-space:nowrap}
.mp-est-terms{margin:10px 0 0;font-size:var(--s);line-height:1.5;color:var(--mut)}

/* The inputs. A definition list because that is what it is: the name of an
   assumption against the value it was given. Two columns at every width, the
   value right-aligned so the column of figures reads down. */
.mp-est-inputs{margin:clamp(16px,1.8vw,22px) 0 0;padding:clamp(14px,1.6vw,18px) 0 0;
border-top:1px solid var(--hair);display:grid;gap:8px}
.mp-est-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
.mp-est-dt{margin:0;font-size:var(--xs);line-height:1.45;color:var(--mut)}
/* flex:1 1 auto is load bearing rather than tidy: without it a value that wraps
   to its own line stops being a flex item wide enough for text-align to bite,
   and the column of figures loses its right edge on exactly the longest row. */
.mp-est-dd{margin:0;flex:1 1 auto;min-width:0;font-size:var(--xs);line-height:1.45;font-weight:800;
color:var(--ink);text-align:right;overflow-wrap:anywhere}
.mp-est-doc{margin:12px 0 0;font-size:var(--xs);line-height:1.5;color:var(--mut)}

/* The disclosure control, the same pattern the offer card uses, so a person who
   has opened one on this page already knows what this is. margin-top:auto pins
   it to the foot of the card whatever the inputs above it cost in height. */
.mp-est-disc{margin:clamp(16px,1.8vw,22px) 0 0;padding:clamp(6px,.8vw,10px) 0 0;
border-top:1px solid var(--hair);font-size:var(--xs);line-height:1.55;color:var(--mut);
overflow-wrap:anywhere}
.mp-est-card>.mp-est-disc{margin-top:clamp(14px,1.6vw,20px)}
.mp-est-sum{cursor:pointer;list-style:none;display:block;padding:11px 0;min-height:44px;
font-weight:800;color:var(--ink);letter-spacing:.02em}
.mp-est-sum::-webkit-details-marker{display:none}
.mp-est-sum::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;
border-right:2px solid var(--a);border-bottom:2px solid var(--a);transform:rotate(45deg);
margin-bottom:2px;vertical-align:middle}
.mp-est-disc[open]>.mp-est-sum::after{transform:rotate(-135deg);margin-bottom:-1px}
.mp-est-sum:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-est-full{margin:4px 0 12px;max-height:180px;overflow-y:auto;font-size:var(--xs);line-height:1.6;
color:var(--mut)}

.mp-est-notes{margin:clamp(24px,2.8vw,34px) 0 0;padding:clamp(18px,2vw,24px) 0 0;
border-top:1px solid var(--line)}
.mp-est-note{margin:0 0 8px;font-size:var(--s);line-height:1.6;color:var(--ink);max-width:70ch}

/* ---- the inventory rail ------------------------------------------------
   Comp geometry, native pixels on the 1830 canvas: 349px cards on 20px
   gutters, first card at the content margin, fifth card clipped by the right
   edge. 349/1830 is 19.1% of the viewport, which is the card width below.

   The rail bleeds off the RIGHT edge and stays aligned to the content margin on
   the left. It gets there with a percentage padding resolved against its own
   box, never with 100vw: 100vw includes the scrollbar gutter and is itself a
   horizontal-overflow bug.

   The band is a light BLUE-grey rather than the system's warm sand, because the
   comp's inventory and trim bands are both cool and the hatch panel that bleeds
   into this one has to sit on the same family of grey to read as texture rather
   than as a second panel. */
.mp-inv{position:relative;padding-left:0;padding-right:0;background:#f3f5fb}
.mp-inv .mp-in{position:relative;z-index:1;padding:0 20px}
/* THE HATCH PANEL. It bleeds in from the LEFT EDGE OF THE VIEWPORT (left:0 on a
   band that has no horizontal padding), it is textured with a repeating diagonal
   rule at the same -52deg as the photo-less plate, and its right edge is CUT ON
   AN ANGLE by the clip polygon rather than being a vertical. Measured off the
   comp at 1120px wide: the edge sits at 24.3% of the viewport at the top of the
   band and at 10.5% at the bottom, so the bottom point is 43% of the panel's own
   width. Width is a percentage of the band, never a vw: vw includes the
   scrollbar gutter and would push the document's scrollWidth past the viewport. */
.mp-inv-hatch{position:absolute;left:0;top:0;bottom:0;z-index:0;pointer-events:none;
  width:clamp(120px,24.3%,350px);background-color:#e6eaf2;
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.9) 0 1px,transparent 1px 8px);
  clip-path:polygon(0 0,100% 0,43% 100%,0 100%)}
.mp-inv-hint{margin:0 0 12px;font-size:var(--xs);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--mut)}
/* The stage exists so the arrow discs have something to hang off that is exactly
   as tall and as wide as the rail. top:50% on it IS "vertically centred on the
   rail", measured rather than eyeballed. */
.mp-inv-stage{position:relative;z-index:1}
.mp-inv-rail{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-left:20px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.mp-inv-rail{scroll-behavior:auto}}
.mp-inv-rail:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.mp-inv-row{list-style:none;display:flex;gap:20px;margin:0;padding:4px 20px 26px}
/* scroll-padding MUST track that inset. With scroll-snap-align:start on the
   cards and a scroll-padding of 20px, Chrome snaps the rail on load and quietly
   scrolls the content inset away, so the first card lands 100px left of the
   heading above it. That is a real defect the proof caught by comparing the two
   positions rather than by looking at a screenshot. */
@media(min-width:1240px){
  /* 600px is half the 1200px container; the extra 20px is the container's
     own padding, so a card lines up with the rule beside the heading. */
  .mp-inv-row{padding-left:calc(50% - 580px)}
  .mp-inv-rail{scroll-padding-left:calc(50% - 580px)}
}
.mp-inv-card{position:relative;flex:0 0 auto;width:clamp(228px,19.1vw,282px);
  display:flex;flex-direction:column;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);scroll-snap-align:start;
  transition:box-shadow .15s,transform .15s}
.mp-inv-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}

/* THE FADED EDGE CARD. The comp does not guillotine the fifth card, it fades it,
   which is what tells a shopper the row continues rather than ends. A scroll
   position cannot be read in CSS, but a VIEW PROGRESS TIMELINE can: "entry" on
   the inline axis is exactly the window in which a card crosses the rail's right
   edge, so the ramp follows the scroll instead of being pinned to the last
   child. Behind @supports, so an engine without view timelines gets a plain
   fully opaque row rather than a row of ghosts. */
/* The floor is .34, not near-zero. At near-zero the card at the edge stopped
   reading as "the row continues" and started reading as a broken card, which is
   worse than the hard crop it replaced. It is most obvious on the photo-less
   plate, whose dark panel washes out to a grey smear. .34 still falls away
   clearly and still leaves the card recognisably a card. */
/* THE PHOTO FADES, THE WORDS DO NOT. Fading the whole card took its price and
   labels below 4.5:1 contrast while it crossed the edge (Lighthouse accessibility
   97 on every model page, the edge card's "Price" label at 3.46:1). The photo or
   plate carries the "the row continues" cue on its own; the text stays legible. */
@keyframes mp-inv-enter{from{opacity:.34}to{opacity:1}}
@supports (animation-timeline:view()){
.mp-inv-card .mp-inv-shot{animation-name:mp-inv-enter;animation-duration:auto;animation-timing-function:linear;
  animation-fill-mode:both;animation-timeline:view(inline);animation-range:entry 0% entry 100%}
}

/* THE PREV/NEXT DISCS. White circle, red arrow, vertically centred on the rail
   and half over it, one on each side, as the comp draws them.
   They are ANCHORS, not buttons. A stateful prev/next needs script and these
   blocks ship none, so the discs are wired to the two moves an anchor really can
   make inside a scroll container: back to the first card, forward to the last.
   The accessible name says that, so nothing is promised that is not delivered. */
.mp-inv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--a);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 6px 18px rgba(12,16,22,.18),0 1px 3px rgba(12,16,22,.10);
  transition:background .15s,box-shadow .15s}
.mp-inv-arrow:hover{background:#fff;box-shadow:0 10px 26px rgba(12,16,22,.24)}
.mp-inv-arrow:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-inv-arrow--prev{left:6px}
.mp-inv-arrow--next{right:14px}
/* Placed AFTER the base rules on purpose: same specificity, so the one that wins
   is the one that comes last. 24px is half the disc, which puts its CENTRE on
   the first card's left edge and half of it over the rail's content. */
@media(min-width:1240px){.mp-inv-arrow--prev{left:calc(50% - 604px)}}

/* The photograph. 4:3, which is the shape a 640x640 source crops to with the
   least loss, and the card is never wider than 282px so the source is always
   painted well below its own resolution. */
.mp-inv-shot{position:relative;aspect-ratio:4/3;overflow:visible;background:var(--sand)}
.mp-inv-img{width:100%;height:100%;object-fit:cover;display:block}
.mp-inv-dots{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:2}
.mp-inv-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.mp-inv-dot--on{background:#fff}
/* The red disc sits ON the seam between photo and body, which is what makes the
   card read as one object rather than two stacked boxes. */
.mp-inv-zoom{position:absolute;right:14px;bottom:-19px;z-index:3;width:38px;height:38px;
  border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 10px rgba(12,16,22,.22)}

/* The photo-less state, which is 33 of the 42 units on this line and therefore
   the card this page is mostly made of. It is designed, not a fallback. */
/* THE PHOTO-LESS PLATE, LIGHT RATHER THAN NEAR BLACK.
   It was a coal box with a hatch, and in a row of white cards carrying bright
   vehicle art that reads as a hole punched in the row rather than as a card
   waiting for a picture. There are still plates and there should be: this
   dealer has photographed 8 of 43 Sierras, and on four lines the manufacturer
   publishes no render this build will stand behind (no Yukon XL colorizer at
   all, no Silverado 3500HD one, and the Silverado 1500's only published trim is
   a lifted ZR2 on 33-inch mud terrains that this lot does not stock). Refusing
   those is the point. Looking broken while refusing them is not.
   The paint colour does the identifying work now, because it is the one thing
   about the vehicle a photograph would have told you. */
.mp-inv-shot--plate{background:#eef1f6;overflow:hidden;padding:16px;display:flex;
  flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;
  background-image:repeating-linear-gradient(-52deg,rgba(20,23,28,.032) 0 1px,transparent 1px 12px)}
.mp-inv-shot--plate .mp-inv-zoom{overflow:visible}
.mp-inv-plate-yr{position:absolute;right:-4px;bottom:-14px;font-size:86px;line-height:.8;
  font-weight:800;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px rgba(20,23,28,.10)}
.mp-inv-plate-id{position:relative;display:block}
.mp-inv-plate-trim{display:block;font-size:var(--d4);line-height:1.15;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.mp-inv-chip{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:var(--s);color:var(--ink)}
.mp-inv-chip-dot{width:20px;height:20px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(20,23,28,.28),0 1px 3px rgba(20,23,28,.14)}
.mp-inv-plate-note{position:relative;font-size:var(--xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#5b6472}

/* The body. One column of labelled figures, as the comp sets it: a small grey
   label over a large value, three or four times. */
.mp-inv-body{padding:26px 18px 20px;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.mp-inv-t{margin:0 0 16px;font-size:var(--s);line-height:1.4;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.mp-inv-fig{margin:0 0 12px}
.mp-inv-lbl{display:block;font-size:var(--s);line-height:1.3;color:var(--mut);font-weight:400}
.mp-inv-strike{display:block;margin-top:2px;font-size:var(--d3);line-height:1.2;
  color:var(--mut);text-decoration:line-through;text-decoration-thickness:1.5px}
.mp-inv-now{display:block;margin-top:2px;font-size:var(--d3);line-height:1.2;color:var(--a)}
/* Green, and only ever here. D9. */
.mp-inv-save{display:block;margin-top:2px;font-size:var(--d3);line-height:1.2;color:var(--save)}
.mp-inv-mo{display:block;margin-top:2px;font-size:var(--d4);line-height:1.25;color:var(--ink)}
.mp-inv-ask{display:block;margin-top:2px;font-size:var(--d4);line-height:1.25;font-weight:800;color:var(--ink)}
/* NOT margin-top:auto. Cards stretch to a common height, and pushing the last
   line to the bottom of a short card opened a hole in the MIDDLE of it next to
   a fuller neighbour. The block stays top-aligned and the slack falls where
   slack belongs, at the foot of the card above the CTA rule. */
.mp-inv-meta{margin:16px 0 0;padding-top:0;font-size:var(--xs);line-height:1.5;color:var(--mut)}

/* The comp's card CTA is a red uppercase LINK on a hairline, not a pill. The
   pill in this band is the one at the foot of the row, which is the band's real
   call to action (D7). Making both a pill would put two primary buttons on
   every card in a row of five. */
.mp-inv-cta{display:block;padding:15px 12px;border-top:1px solid var(--hair);
  color:var(--a);text-decoration:none;text-align:center;font-weight:800;
  font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase}
.mp-inv-cta:hover{background:var(--sand)}
/* Stretched over the whole card, so the card is clickable without a second
   competing link. .mp-inv-card is the positioned ancestor it resolves against. */
.mp-inv-cta::after{content:"";position:absolute;inset:0;z-index:4}
.mp-inv-cta:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.mp-inv-foot{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:12px}

/* THE REST OF THE LOT. A real <details>, styled so its summary reads as the
   page's primary control rather than as a browser triangle. The grid inside is
   the same card the rail holds, laid out down the page instead of across it. */
.mp-inv-more{margin:22px 0 0}
.mp-inv-more-sum,
.mp-inv-more>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:0 34px;background:var(--a);color:#fff;font-weight:800;font-size:var(--s);
letter-spacing:.09em;text-transform:uppercase;border-radius:var(--pill);cursor:pointer}
.mp-inv-more>summary::-webkit-details-marker{display:none}
.mp-inv-more>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;
border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.mp-inv-more[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.mp-inv-more>summary:hover{background:var(--a2)}
.mp-inv-more>summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp-inv-grid{list-style:none;display:grid;gap:20px;margin:26px 0 0;padding:0;
grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.mp-inv-grid .mp-inv-card{width:auto;min-width:0;scroll-snap-align:none}
/* A studio cutout is not a lot photograph and must not be cropped like one: it
   sits on white, contained, with room around the vehicle. */
.mp-inv-shot--art{background:#fff}
.mp-inv-img--art{width:100%;height:100%;object-fit:contain;padding:7% 5%}

/* ---- trim comparison table ------------------------------------------ */
/* The comp's table is WHITE ROWS FLOATING ON A LIGHT BLUE-GREY BAND, separated
   by hairlines, with the column labels sitting on the band itself rather than in
   a dark header bar. So the scroll container is transparent and the cells carry
   the paper, which is also what lets the sticky first column work without a
   second background to keep in sync. */
.mp-trim{background:#f3f5fb}
/* A hard-clipped right edge gives a phone no clue that five more columns exist,
   so the hint is shown exactly where the table cannot fit and nowhere else.
   Below 760 there is no sideways scroll to hint at - the table has become a
   stack of cards - so the window is bounded at both ends. A hint pointing at a
   gesture that does nothing is worse than no hint. */
.mp-trim-hint{display:none;margin:0 0 10px;font-size:var(--xs);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--mut)}
@media(min-width:760px) and (max-width:899px){.mp-trim-hint{display:block}}
.mp-trim-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.mp-trim-scroll:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-trim-t{border-collapse:collapse;width:100%;min-width:1000px;font-size:var(--s);text-align:left}
.mp-trim-cap{caption-side:top;text-align:left;padding:0 0 18px;font-size:var(--s);line-height:1.5;
  color:var(--mut)}
.mp-trim-head th{background:transparent;color:var(--mut);font-size:var(--s);letter-spacing:0;
  font-weight:400;padding:0 12px 12px;white-space:nowrap;vertical-align:bottom}
.mp-trim-body th,.mp-trim-body td{background:var(--paper);padding:16px 12px;
  border-top:1px solid #e5eaf2;vertical-align:middle}
.mp-trim-body tr:first-child th,.mp-trim-body tr:first-child td{border-top:0}
.mp-trim-name{position:sticky;left:0;z-index:1;background:var(--paper);font-weight:800;
  font-size:var(--d4);letter-spacing:-.01em;white-space:nowrap;
  box-shadow:1px 0 0 #e5eaf2}
.mp-trim-head .mp-trim-name{background:#f3f5fb;box-shadow:none}
.mp-trim-nm{display:block}
.mp-trim-sub{display:block;margin-top:5px;font-size:var(--xs);line-height:1.4;font-weight:400;
  letter-spacing:.02em;color:var(--mut);white-space:normal;max-width:24ch}
.mp-trim-eng{max-width:20ch;white-space:normal}
.mp-trim-tx{white-space:nowrap}
/* Key equipment: a short list that wraps inside its own measure, the "adds over"
   label above it so the difference reads before the list. */
.mp-trim-eq{min-width:18ch;max-width:24ch;white-space:normal;line-height:1.45}
.mp-trim-eqh{display:block;margin-bottom:3px;font-size:var(--xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.mp-trim-alt{display:block;margin-top:4px;font-size:var(--xs);line-height:1.4;color:var(--mut)}
.mp-trim-num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* The comp's price cell is two stacked lines: the MSRP struck through in a cool
   grey above, the live price in brand red below. */
.mp-trim-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-trim-was{display:block;font-size:var(--s);line-height:1.3;color:#66738b;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.mp-trim-now{display:block;font-size:var(--d4);line-height:1.25;font-weight:800;color:var(--a)}
.mp-trim-na{color:var(--mut);font-size:var(--s);font-weight:400}
/* position:relative matters here, and on .mp-trim-act for the same reason. The
   screen-reader-only span inside is absolutely positioned, and without a
   positioned ancestor it resolves against the initial containing block, escapes
   the scroll container's clip, and drags the DOCUMENT's scrollWidth out to the
   table's full width at 390. That is a horizontal page scroll caused by an
   invisible 1px element. */
.mp-trim-mark{text-align:center;position:relative}
/* WHAT ELSE OF THIS TRIM IS ON THE LOT. One cell where three tick columns used
   to be, holding real counts a shopper can act on rather than three glyphs. */
.mp-trim-also{white-space:normal}
.mp-trim-also .mp-trim-chip{margin:3px 6px 3px 0}
.mp-trim-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;margin:0 6px 0 0;
border-radius:var(--pill);background:#eef1f7;color:#3b4250;font-size:var(--xs);font-weight:800;
letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.mp-trim-chip--go:hover{background:#e2e7f1}
.mp-trim-chip--go:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.mp-trim-act{position:relative;text-align:center;white-space:nowrap}
/* Every row gets the pill. It is the comp's one repeated control and the only
   red object in the table apart from the price. */
.mp-trim-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 18px;border-radius:var(--pill);background:var(--a);color:#fff;text-decoration:none;
  font-weight:800;font-size:var(--xs);letter-spacing:.09em;text-transform:uppercase}
.mp-trim-cta:hover{background:var(--a2)}
.mp-trim-cta:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-trim-tick{color:var(--a);display:inline-block;vertical-align:middle}
.mp-trim-no{display:inline-block;width:14px;height:2px;background:#c3c8d0;vertical-align:middle}
.mp-trim-src{margin:16px 0 0;font-size:var(--xs);line-height:1.55;color:var(--mut)}
.mp-trim-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The per-cell label and the value wrapper exist for the phone layout only. At
   table width the label is not drawn and the wrapper forms NO BOX AT ALL, so
   every cell lays out exactly as it did before either of them existed. */
.mp-trim-lbl{display:none}
.mp-trim-v{display:contents}

/* ---- the same comparison, as cards, below 760 -------------------------
   At 390 the table was a two-column sideways scroller in which the engine
   string ("2.7L I4 Turbocharged DOHC 16V LEV3-SULEV30 310hp") wrapped to five
   lines and the transmission, the fuel economy, the price and the button were
   all off-screen. The comp never scrolls a table sideways. So below 760 each
   row becomes a card: the trim name as its heading, then one labelled line per
   value, then the pill across the foot.

   EVERYTHING HERE THAT CHANGES display HAS ALREADY BEEN GIVEN AN EXPLICIT
   ARIA ROLE IN THE MARKUP. A <td> that is not display:table-cell is not a cell
   to a screen reader, and a layout that silently deletes "row 3, Engine" is a
   worse page than the scroller it replaced. The head row is CLIPPED rather than
   display:none for the same reason: display:none would take the column names
   out of the tree along with the layout, and those names are what tell a screen
   reader which column a value belongs to. The visible labels are aria-hidden so
   that the column name is not then read twice. */
@media(max-width:759px){
  /* nothing scrolls sideways any more, so the scroller stops being one */
  .mp-trim-scroll{overflow:visible}
  .mp-trim-t{display:block;position:relative;width:100%;min-width:0}
  .mp-trim-cap{display:block;padding-bottom:16px}
  .mp-trim-head{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .mp-trim-head tr,.mp-trim-head th{display:block;padding:0}
  .mp-trim-body{display:block}
  /* the card. The paper moves from the cells to the row, which is what makes
     the row read as one object rather than as nine stacked boxes. */
  .mp-trim-body tr{display:block;margin:0 0 14px;background:var(--paper);
    box-shadow:inset 0 0 0 1px #e5eaf2}
  .mp-trim-body tr:last-child{margin-bottom:0}
  /* the heading. It is the <th scope="row">, so it is the only cell in the card
     that is not a label/value line and the only one that needs no hairline. */
  .mp-trim-body th{display:block;position:static;box-shadow:none;background:transparent;
    border-top:0;padding:16px 16px 13px;font-size:var(--d3);line-height:1.15;white-space:normal}
  .mp-trim-body td{display:flex;gap:14px;align-items:baseline;background:transparent;
    padding:11px 16px;border-top:1px solid #e5eaf2}
  /* the first row's cells lose their hairline at table width by design; inside a
     card every line needs one, including the first card's. */
  .mp-trim-body tr:first-child td{border-top:1px solid #e5eaf2}
  /* 108px, not a ch measure. A flex-basis narrower than the widest label does
     not hold: min-width:auto pushes that one item out to its own content, so
     "TRANSMISSION" sat 25px wider than "ENGINE" and every value started at a
     different x. 108px clears the two longest labels on one line and puts the
     whole value column on a single edge. */
  .mp-trim-lbl{display:block;flex:0 0 108px;font-size:var(--xs);line-height:1.6;
    letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--mut)}
  .mp-trim-v{display:block;flex:1 1 auto;min-width:0}
  /* the column widths and the nowrap were the table's constraints, not the
     card's, and leaving them on is what forced the five-line engine string. */
  .mp-trim-eng,.mp-trim-eq{max-width:none;min-width:0}
  .mp-trim-tx,.mp-trim-num,.mp-trim-price{white-space:normal}
  .mp-trim-mark{text-align:left}
  /* on one line here rather than stacked: the label already says "Price", so
     the was/now pair reads as one figure being corrected. */
  .mp-trim-was,.mp-trim-now{display:inline-block;vertical-align:baseline}
  .mp-trim-was{margin-right:9px}
  .mp-trim-body .mp-trim-act{display:block;padding:14px 16px 16px;text-align:center;white-space:normal}
  /* a row with no honest VDP draws no pill, and an empty red-bar-shaped hole is
     not a footer. */
  .mp-trim-body .mp-trim-act:empty{display:none}
  .mp-trim-cta{display:flex;width:100%;min-height:48px;padding:0 16px}
  /* "3 engines in stock" under an engine string is inventory bookkeeping. It is
     genuinely useful in the table, where it costs a half line beside a value
     that already fits. In a card it is a whole extra line on four of the six
     rows, on eight cards, for a fact nobody is choosing a trim on. */
  .mp-trim-alt{display:none}
  /* THE CAP. Hiding is done by :not(:checked) so that revealing is simply the
     absence of a rule: nothing has to restore a display value, which is what
     would otherwise go wrong across a breakpoint where these rows switch
     between table-row and block. */
  .mp-trim-tgl:not(:checked) ~ .mp-trim-scroll .mp-trim-body tr:nth-child(n+5){display:none}
  .mp-trim-tgl:checked ~ .mp-trim-more .mp-trim-more-a{display:none}
  .mp-trim-tgl:not(:checked) ~ .mp-trim-more .mp-trim-more-b{display:none}
}
/* The control itself. Below 760 it is the reveal; at table width every row is
   already visible, so it has nothing to do and is not drawn. */
.mp-trim-more{display:none}
.mp-trim-more-a,.mp-trim-more-b{display:inline}
@media(max-width:759px){
  .mp-trim-more{display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;min-height:50px;margin:14px 0 0;padding:0 20px;border-radius:var(--pill);
    background:var(--paper);box-shadow:inset 0 0 0 2px var(--a);color:var(--a);
    font-size:var(--xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
  .mp-trim-more:hover{background:var(--a);color:#fff}
  .mp-trim-tgl:focus-visible ~ .mp-trim-more{outline:3px solid var(--ink);outline-offset:3px}
}

/* ---- disclaimers ------------------------------------------------------
   The comp sets this as the tail of the trim band, not as a band of its own: the
   same light blue-grey, a small muted label, and a bulleted list at fine-print
   size over a wide measure. It carries no rule and no heading weight on purpose.
   It is the page's evidence, and evidence that shouts reads as a warning. */
.mp-dis{background:#f3f5fb;padding-top:clamp(24px,3vw,40px)}
.mp-dis-h{margin:0 0 14px;font-size:var(--s);line-height:1.5;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--mut)}
.mp-dis-list{list-style:none;margin:0;padding:0;max-width:108ch}
/* Same reason as .mp-fb-cdisc: these are verbatim manufacturer and dealer legal
   strings, they can and do contain bare URLs, and we may not edit them to fit. */
.mp-dis-item{position:relative;margin:0 0 12px;padding-left:22px;font-size:var(--xs);
  line-height:1.65;color:var(--mut);overflow-wrap:anywhere}
.mp-dis-item::before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:#78849a}
.mp-dis-lbl{font-weight:700;color:var(--ink)}

/* ---- current offers -------------------------------------------------- */
.mp-sp-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mp-sp-card{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;
  border:1px solid rgba(255,255,255,.16);border-top:3px solid var(--a);background:rgba(255,255,255,.03)}
.mp-sp-label{display:inline-block;align-self:flex-start;margin:0;background:var(--a);color:#fff;
  font-size:var(--xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.mp-sp-fig{font-size:var(--d2);line-height:1;font-weight:800;letter-spacing:-.03em;color:#fff;margin:16px 0 0}
.mp-sp-t{font-size:var(--d4);line-height:1.3;font-weight:700;color:#f2f4f7;margin:10px 0 0}
.mp-sp-detail{font-size:var(--s);line-height:1.55;color:#cbd2dc;margin:8px 0 0}
.mp-sp-ends{font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#b9c0cc;margin:12px 0 0}
.mp-sp-cta{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;background:var(--a);color:#fff;text-decoration:none;font-weight:700;font-size:var(--s);
  letter-spacing:.06em;text-transform:uppercase;align-self:flex-start}
.mp-sp-cta:hover{background:var(--a2)}
.mp-sp-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mp-sp-fine{font-size:var(--xs);line-height:1.5;color:#98a1b0;margin:14px 0 0}
@media(min-width:760px){.mp-sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.mp-sp-grid{grid-template-columns:7fr 5fr}}

/* ---- section head ------------------------------------------------------
   datamix-2019: rule #e4e4e4 at the content margin, kicker bold uppercase
   17px, head bold uppercase 42px, both indented ~46px past the rule. Left
   aligned at every width; the comp never centres one. */
/* ---- the designed photo-less state ------------------------------------
   Shared by every band that places a photograph. 33 of 42 units on this line
   have no image, so this is the COMMON case and it is drawn as its own thing
   rather than as a grey rectangle. */
.mp-ph-plate{width:100%;height:100%;background:var(--coal);
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px)}

/* ---- program tiles -----------------------------------------------------
   Comp geometry, native pixels: four tiles at x=20..452, 473..904, 925..1357,
   1378..1809 on an 1830 canvas. Equal columns (.mp-eq--4 from tokens), 20px
   gutters, 20px page margin. The white plate spans x=0..234 against a photo
   starting at x=20, so it bleeds exactly one gutter to the left and covers the
   photograph's bottom-left corner. */
.mp-pg-row{list-style:none;margin:0;padding:0}
.mp-pg-tile{position:relative;min-width:0}
.mp-pg-shot{position:relative;aspect-ratio:4/3;background:var(--coal)}
@media(min-width:640px){.mp-pg-shot{aspect-ratio:3/4}}
.mp-pg-frame{position:absolute;inset:0;overflow:hidden}
.mp-pg-img{width:100%;height:100%;object-fit:cover;display:block}
/* The comp's tile photographs are dark studio and lifestyle frames. Ours are
   bright daylight lot photos, so the scrim has to work harder to keep the
   overlaid copy at 4.5:1 (D8) than the comp's does. It runs the full height
   rather than the top 74%, because the body copy sits at about 44% down. */
.mp-pg-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,16,.90) 0%,rgba(10,12,16,.76) 34%,
    rgba(10,12,16,.46) 62%,rgba(10,12,16,.30) 100%)}
.mp-pg-copy{position:absolute;left:0;right:0;top:0;padding:clamp(16px,1.9vw,26px)}
.mp-pg-t{margin:0;font-size:clamp(17px,1.45vw,23px);line-height:1.28;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:#fff}
.mp-pg-lnk{color:inherit;text-decoration:none}
.mp-pg-lnk::after{content:"";position:absolute;inset:0;z-index:4}
.mp-pg-lnk:hover{text-decoration:underline}
.mp-pg-lnk:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mp-pg-b{margin:9px 0 0;font-size:clamp(13.5px,1.02vw,16px);line-height:1.5;color:#f0f2f5}
.mp-pg-plate{position:absolute;left:-16px;bottom:0;margin:0;z-index:3;background:var(--paper);
  padding:clamp(10px,1.2vw,17px) clamp(24px,2.8vw,42px) clamp(10px,1.2vw,17px) clamp(14px,1.6vw,22px)}
.mp-pg-val{display:block;font-size:clamp(24px,2.2vw,36px);line-height:1;font-weight:800;
  letter-spacing:-.015em;color:var(--a)}
.mp-pg-cap{display:block;margin-top:5px;font-size:var(--xs);line-height:1.3;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--mut)}

/* ---- why buy here ------------------------------------------------------
   THE SIGNATURE MOVE. The panel occupies grid rows 1-2 and columns 5 to the
   end; the card occupies rows 2-3 and columns 1-9. They share row 2 and
   columns 5-8, which IS the overlap, so the card starts left of the panel and
   hangs below it exactly as the comp does.

   Comp proportions, measured on the 1830 canvas: the stage runs 515..1830, the
   panel starts 31% into it and the card ends at 61% of it, so the card covers
   a little under half the panel and the red is still the dominant field. Those
   are the numbers the column spans below reproduce (33% and 67%).

   Expressed as grid line placement and never as negative margins: a negative
   margin here is a page-wide horizontal scrollbar at 390 (D11). */
.mp-why{padding-left:20px;padding-right:20px}
.mp-why-in{max-width:1560px;margin:0 auto}
.mp-why-grid{display:grid;gap:clamp(26px,3vw,40px)}
.mp-why-col{min-width:0}
.mp-why-copy{margin:0}
.mp-why-p{margin:0 0 14px;font-size:var(--b);line-height:1.68;color:var(--mut)}
.mp-why-pts{list-style:none;margin:22px 0 0;padding:0}
.mp-why-pt{position:relative;margin:0 0 18px;padding-left:22px;
  font-size:var(--s);line-height:1.58;color:var(--ink)}
.mp-why-pt::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--a)}
.mp-why--dark .mp-why-pt{color:#e7eaef}

.mp-why-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto}
.mp-why-panel{position:relative;overflow:hidden;background:var(--a);
  grid-column:1 / -1;grid-row:1;aspect-ratio:16/10}
.mp-why-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end}
/* width/height auto with max-* caps is what makes an upscale STRUCTURALLY
   impossible: a 640px source can never be painted wider than 640px, whatever
   the panel does. The proof measures the rendered box against naturalWidth. */
.mp-why-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) contrast(1.06) brightness(1.08);mix-blend-mode:multiply}
.mp-why-card{position:relative;z-index:2;background:var(--paper);box-shadow:var(--sh);
  grid-column:1 / -1;grid-row:2;margin-top:-58px;margin-right:24px}
.mp-why-cells{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-why-cell{display:flex;align-items:center;min-height:clamp(72px,7vw,104px);
  padding:14px clamp(14px,1.9vw,32px);font-size:clamp(11px,.92vw,13.5px);line-height:1.42;
  font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.mp-why-cell:nth-child(-n+2){border-top:0}
.mp-why-cell:nth-child(odd){border-left:0}

@media(min-width:1000px){
  /* The panel runs to the viewport's right edge. It gets there by the band
     dropping its own right padding, never by a negative margin. */
  .mp-why{padding-right:0}
  .mp-why-in{padding-left:clamp(20px,4.6vw,110px)}
  .mp-why-grid{grid-template-columns:minmax(230px,22%) minmax(0,1fr);
    gap:clamp(18px,1.8vw,28px);align-items:start}
  .mp-why-stage{grid-template-rows:clamp(46px,5.4vw,100px) auto clamp(46px,5.4vw,100px)}
  .mp-why-panel{grid-column:5 / -1;grid-row:1 / 3;aspect-ratio:auto}
  .mp-why-card{grid-column:1 / 9;grid-row:2 / 4;margin-top:0;margin-right:0}
}

/* ---- feature band: the same overlap, lighter -------------------------
   The comp's POWER FEATURES band sets the claim in black on white to the LEFT
   of a red figure panel, with the panel overlapping the photography above it.
   Here the claim card overlaps the panel's left edge by about one column, and
   the panel's own content is padded clear of that column so the overlap never
   swallows a figure. */
.mp-fx{padding-left:20px;padding-right:20px}
.mp-fx-in{max-width:1560px;margin:0 auto}
.mp-fx-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto}
.mp-fx-panel{position:relative;overflow:hidden;background:var(--a);color:#fff;
  grid-column:1 / -1;grid-row:1;min-height:220px}
.mp-fx-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end}
.mp-fx-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) contrast(1.06) brightness(1.08);mix-blend-mode:multiply}
.mp-fx-panel-in{position:relative;z-index:2;padding:clamp(22px,2.6vw,40px)}
.mp-fx-pl{margin:0 0 clamp(18px,2vw,28px);font-size:var(--xs);font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:#fff}
.mp-fx-figs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mp-fx-fig{min-width:0}
.mp-fx-fv{display:block;font-size:var(--d4);line-height:1.25;font-weight:800;
  letter-spacing:-.005em;color:#fff}
.mp-fx-fl{display:block;margin-top:7px;font-size:var(--xs);line-height:1.4;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#ffe1e3}
.mp-fx-card{position:relative;z-index:2;background:var(--paper);box-shadow:var(--sh);
  grid-column:1 / -1;grid-row:2;margin-top:-46px;margin-right:26px;
  padding:clamp(20px,2.4vw,36px)}
.mp-fx-lead{margin:0;font-size:var(--d3);line-height:1.3;font-weight:800;
  letter-spacing:.008em;text-transform:uppercase;color:var(--ink)}
.mp-fx-sub{margin:8px 0 0;font-size:var(--d4);line-height:1.35;font-weight:400;
  letter-spacing:.008em;text-transform:uppercase;color:var(--mut)}
.mp-fx-note{margin:clamp(22px,2.4vw,34px) 0 0;font-size:var(--xs);line-height:1.55;color:var(--mut)}
.mp-fx--dark .mp-fx-note{color:#cbd2dc}

@media(min-width:1000px){
  .mp-fx{padding-right:0}
  .mp-fx-in{padding-left:clamp(20px,4.6vw,110px)}
  .mp-fx-stage{grid-template-rows:clamp(40px,4.6vw,80px) auto clamp(40px,4.6vw,80px)}
  .mp-fx-panel{grid-column:5 / -1;grid-row:1 / 3}
  .mp-fx-panel-in{padding-left:18%}
  .mp-fx-card{grid-column:1 / 6;grid-row:2 / 4;margin-top:0;margin-right:0;align-self:center}
}

/* ---- welcome ----------------------------------------------------------- */
.mp-wel-grid{display:grid;gap:clamp(24px,3.2vw,52px);align-items:start;text-align:left}
@media(min-width:900px){.mp-wel-grid{grid-template-columns:8fr 4fr}}
.mp-wel-body{min-width:0}
.mp-wel-p{margin:0 0 14px;font-size:var(--b);line-height:1.68;max-width:70ch}
.mp-wel-sub{margin:clamp(26px,2.6vw,38px) 0 10px;font-size:clamp(17px,1.45vw,22px);
  line-height:1.3;font-weight:800;letter-spacing:.008em;text-transform:uppercase}
.mp-wel-sub--first{margin-top:0}
.mp-wel--dark .mp-wel-p{color:#dbe0e8}
.mp-wel-side{min-width:0}
.mp-wel-card{background:var(--paper);padding:clamp(22px,2.2vw,30px);box-shadow:inset 0 0 0 1px var(--line)}
.mp-wel-card + .mp-wel-card{margin-top:14px}
.mp-wel--dark .mp-wel-card{background:#1b1f26;box-shadow:inset 0 0 0 1px #2c333d}
.mp-wel-ttl{margin:0 0 16px;font-size:var(--xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);font-weight:800}
.mp-wel--dark .mp-wel-ttl{color:#cbd2dc}
.mp-wel-facts{margin:0;padding:0}
.mp-wel-facts--tight{font-size:var(--s)}
.mp-wel-fact{margin:0 0 16px}
.mp-wel-fact--row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.mp-wel-fact--row .mp-wel-fk{margin:0}
.mp-wel-fact--row .mp-wel-fv{font-size:var(--d4);white-space:nowrap}
.mp-wel-fk{margin:0 0 4px;font-size:var(--xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);font-weight:700}
.mp-wel--dark .mp-wel-fk{color:#cbd2dc}
.mp-wel-fv{margin:0;font-size:var(--b);font-weight:700;line-height:1.45}
.mp-wel-tel{color:var(--a);text-decoration:none;font-weight:800}
.mp-wel-tel:hover{text-decoration:underline}
.mp-wel-tel:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-wel--dark .mp-wel-tel{color:#ff8b8b}
.mp-wel-cta{margin:20px 0 0}
.mp-wel-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 30px;border-radius:999px;background:var(--a);color:#fff;text-decoration:none;
  font-weight:800;font-size:var(--s);letter-spacing:.06em;text-transform:uppercase}
.mp-wel-btn:hover{background:var(--a2)}
.mp-wel-btn:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-wel-rev{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.mp-wel-rev-q{margin:0;font-size:var(--s);line-height:1.64}
.mp-wel-rating{margin:8px 0 0;font-size:var(--xs);font-weight:800;letter-spacing:.06em;color:var(--a)}
.mp-wel-rev-a{margin:8px 0 0;font-size:var(--xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);font-weight:700}
.mp-wel--dark .mp-wel-rev-a{color:#cbd2dc}

/* ---- shared -------------------------------------------------------------
   The three bands lose their side padding entirely: their mosaics must REACH
   the viewport edge, and they get there by not being inset in the first place
   rather than by a negative margin, which is how you buy a page-wide horizontal
   scrollbar at 390 (D11). The head keeps its own inset container. */
.mp-ix,.mp-px,.mp-sf{padding-left:0;padding-right:0}
.mp-fb-in{max-width:1200px;margin:0 auto;padding:0 20px}
.mp-fb-lede-disc{font-size:11.5px;line-height:1.55;color:var(--mut);margin:14px 0 0;
  max-width:66ch;padding-left:var(--ind)}

/* Tiles butt flush against each other: the comp has no gutters anywhere in
   these mosaics, and the gutter is what would turn a mosaic into a card grid. */
.mp-fb-tile{position:relative;overflow:hidden;margin:0;min-width:0;background:var(--coal)}
.mp-fb-img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- THE OEM RENDER, COMPOSED AROUND THE VEHICLE ------------------------
   A studio render is a 1500x750 frame carrying a truck that is only about
   63% of it wide and 69% of
   it tall. object-fit sees the FILE, so contain fits the transparent air and
   the truck lands at a fraction of whatever the tile gave it. Three tall tiles
   of that is three small trucks in three big black rectangles, which is the
   defect this replaces.

   So the tile becomes a size container, the image is taken out of flow, and it
   is scaled and offset so the VEHICLE's own box is what fills the tile.
   --sw, --sh, --cx and --cy come in on the element from the measured box for
   that frame; everything below is the same for every frame:

     --sw / --sh   the scale at which the vehicle exactly fills width / height
     --s           what we actually use, and it is a min() of three things:
                     max(sw,sh)          cover the tile with the vehicle
                     min(sw,sh)*--crop   but never crop the truck by more than
                                         the crop budget, because a side-on
                                         render sliced in half is not a picture
                                         of a truck
                     1px                 and NEVER draw the file past its own
                                         1500px natural width, at any viewport
   left/top then put the vehicle's centre on the tile's centre. */
.mp-fb-tile--art{background:var(--coal);container-type:size;--crop:1.45;
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px)}
.mp-fb-img.mp-fb-img--art{position:absolute;padding:0;background:transparent;object-fit:fill;
  --s:min(1px,max(var(--sw),var(--sh)),calc(min(var(--sw),var(--sh)) * var(--crop)));
  width:calc(1500 * var(--s));height:calc(750 * var(--s));max-width:none;
  left:calc(50cqw - var(--cx) * var(--s));top:calc(50cqh - var(--cy) * var(--s))}
/* The widest tile is the one whose aspect is furthest from the vehicle's, so it
   is the one that would have to throw away most of the roof and the wheels to
   fill. It gets a tighter budget and keeps a little air instead. */
.mp-px-b.mp-fb-tile--art{--crop:1.32}

/* A DARK BODY ON A NEAR-BLACK PLATE IS NOT A PICTURE OF ANYTHING. The comp
   answers this with a lit backdrop behind its dark car, so this does the same:
   when the body is not light enough to read against coal, the plate gets the
   studio backdrop GM would have shot the truck against. It has to be WIDE, not
   a glow tucked in behind the vehicle where the vehicle then hides it: what
   has to be lighter is the plate a person sees AROUND the silhouette.

   This is a mitigation and it is not a substitute for choosing the body colour
   against the tile. No plate that keeps this band dark can put 3:1 between
   itself and a near-black truck. The measurement below says so out loud. */
.mp-fb-tile--lit{background-image:
  radial-gradient(96% 84% at 50% 52%,rgba(228,238,250,.40) 0%,rgba(158,176,200,.22) 42%,
    rgba(96,110,130,.10) 66%,rgba(0,0,0,0) 84%),
  repeating-linear-gradient(-52deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px)}
/* Three studio renders on three coal plates butt into one continuous black
   strip and the tiling disappears. A single hairline down the left of every
   art tile after the first puts the seams back without adding a gutter the
   comp does not have. */
.mp-px-b.mp-fb-tile--art,.mp-px-c.mp-fb-tile--art{box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.mp-fb-plate{width:100%;height:100%;background:var(--coal);
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px)}

/* THE RED PANEL. Flat brand-red fill, white type, a small uppercase label, then
   the figures. No gradient, no shadow, no rounding: it is a block of colour. */
.mp-fb-panel{background:var(--a);color:#fff;display:flex;align-items:center;min-width:0}
.mp-fb-panel-in{width:100%;padding:clamp(20px,2.3vw,34px) clamp(20px,2.5vw,38px)}
.mp-fb-pl{font-size:var(--xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#fff;margin:0 0 clamp(14px,1.5vw,22px);line-height:1.4}
.mp-fb-figs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.5vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.mp-fb-fig{margin:0;min-width:0}
.mp-fb-fv{display:block;font-size:clamp(15px,1.3vw,19px);font-weight:800;line-height:1.25;
  letter-spacing:.02em;text-transform:uppercase;color:#fff}
.mp-fb-fl{display:block;font-size:var(--xs);line-height:1.5;margin-top:5px;color:#fff;
  text-transform:uppercase;letter-spacing:.05em;font-weight:400}
/* The disclosure travels INSIDE the panel with the claim it substantiates.
   Pure white, never a tint: a legally required line is not decoration. */
.mp-fb-discs{margin:clamp(14px,1.6vw,22px) 0 0;border-top:1px solid rgba(255,255,255,.35);
  padding-top:clamp(10px,1.1vw,14px)}
.mp-fb-disc{font-size:11.5px;line-height:1.5;color:#fff;margin:0 0 6px}

/* The white copy panel (interior) and the white claim block (power) share a
   voice: one small bold uppercase line, then a larger uppercase line in regular
   weight broken over two or three lines, exactly as the comp sets it. */
.mp-fb-copy,.mp-fb-claim{background:var(--paper);display:flex;align-items:center;min-width:0}
.mp-fb-claim{align-items:start}
.mp-fb-copy-in,.mp-fb-claim-in{width:100%;padding:clamp(20px,2.3vw,34px) clamp(20px,2.6vw,40px)}
.mp-fb-lead,.mp-fb-clead{font-size:clamp(15px,1.35vw,19px);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.3;margin:0 0 clamp(10px,1.1vw,16px);color:var(--ink)}
.mp-fb-sub,.mp-fb-csub{font-size:clamp(17px,1.55vw,23px);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.5;margin:0;color:var(--ink)}
/* overflow-wrap is not decoration here. This paragraph carries the manufacturer's
   own disclosure verbatim and we may not edit legal text to make it fit, so the
   text has to be allowed to break wherever it must. Chevrolet's Bluetooth
   disclosure is one 44 character unbreakable URL, and in this column at 390 it
   pushed the whole document to scrollWidth 473. */
.mp-fb-cdisc{font-size:11.5px;line-height:1.5;color:var(--mut);margin:clamp(12px,1.3vw,18px) 0 0;
  overflow-wrap:anywhere}

/* The band note block. Two columns at desktop so a stack of GM disclosures
   reads as one quiet footer rather than as a second body column. It sits close
   under the mosaic on purpose: the comp gives its fine print a hairline of air,
   not a storey of it, and the gap this used to leave read as a missing row. */
.mp-fb-notes{padding-top:clamp(14px,1.6vw,24px)}
.mp-fb-notes-sum{display:none}
.mp-fb-notes-body{display:contents}
/* At desktop the control is hidden and the panel is forced visible, so the notes
   still read as the quiet two-column footer the comp has. The <details> is only
   a real control below 900px, where the stacked text was the problem. */
@media(min-width:900px){.mp-fb-notes>.mp-fb-notes-body{display:contents !important}
  .mp-fb-notes:not([open])>.mp-fb-notes-body{display:contents}}
/* Below 900px the notes become a real disclosure control. 44px tap target,
   the count on the label because a reader wants to know how much is behind it
   before opening, and the panel scrolls in place so a long stack of GM
   disclosures can never grow the band again. */
@media(max-width:899.98px){
  .mp-fb-notes{border-top:1px solid var(--line);padding-top:0;margin-top:18px}
  .mp-fb-notes-body{display:block;max-height:46vh;overflow-y:auto;padding:2px 0 10px}
  .mp-fb-notes-sum{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;
    list-style:none;font-size:var(--xs);font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--mut)}
  .mp-fb-notes-sum::-webkit-details-marker{display:none}
  .mp-fb-notes-sum i{font-style:normal;font-size:11px;font-weight:700;color:var(--mut);
    border:1px solid var(--line);border-radius:999px;padding:1px 7px}
  .mp-fb-notes-sum::after{content:"";margin-left:auto;width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .15s}
  .mp-fb-notes[open] .mp-fb-notes-sum::after{transform:rotate(-135deg)}
  .mp-fb-notes-sum:focus-visible{outline:3px solid var(--a);outline-offset:3px}
}
.mp-fb-note{font-size:11.5px;line-height:1.55;color:var(--mut);margin:0 0 8px;break-inside:avoid}
@media(min-width:900px){.mp-fb-notes{column-count:2;column-gap:clamp(24px,3vw,48px)}}

/* ---- BAND 6, INTERIOR: the interlocking mosaic -------------------------
   dm_2 y 843..1215. Row 1 is 175 tall and row 2 is 197, and the left photo
   spans both. Adjacent tiles are DIFFERENT heights, which is the whole reason
   the composition reads as tiled rather than as a row of cards.

   The row carrying the red panel is minmax(base,auto) rather than a fixed
   height. The comp's panel had nothing to carry but three figures; ours carries
   the GM disclosure that makes the claim publishable, and a fixed row would
   simply spill that disclosure over the tile below. The base keeps the comp's
   proportion whenever the content fits it. */
.mp-ix-mo{display:grid;width:100%;
  /* The comp's two rows are 175 and 197: row 2 is deliberately the deeper one.
     Row 1 grows a little past its base to fit the panel's class definition, so
     row 2 is set proportionally deeper again to keep the comp's relationship
     rather than letting the two converge into a neat, dead 2xN. */
  --ix-r1:clamp(150px,15.6vw,255px);--ix-r2:clamp(176px,19.4vw,300px);
  --ix-m1:clamp(104px,27vw,150px);--ix-m2:clamp(96px,25vw,140px)}

/* mobile: the tall tile still spans two rows, so the interlock survives. */
@media(max-width:639.98px){
  .mp-ix-mo{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:auto var(--ix-m1) auto var(--ix-m2)}
  .mp-ix-a{grid-area:1/1/3/4}
  .mp-ix-copy{grid-area:1/4/2/7}
  .mp-ix-b{grid-area:2/4/3/7}
  .mp-ix-panel{grid-area:3/1/4/7}
  .mp-ix-c{grid-area:4/1/5/4}
  .mp-ix-d{grid-area:4/4/5/7}
}
@media(min-width:640px) and (max-width:899.98px){
  .mp-ix-mo{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:minmax(var(--ix-r1),auto) minmax(var(--ix-r2),auto) var(--ix-m1)}
  .mp-ix-a{grid-area:1/1/3/3}
  .mp-ix-copy{grid-area:1/3/2/7}
  .mp-ix-panel{grid-area:2/3/3/7}
  .mp-ix-b{grid-area:3/1/4/3}
  .mp-ix-c{grid-area:3/3/4/5}
  .mp-ix-d{grid-area:3/5/4/7}
}
@media(min-width:900px){
  .mp-ix-mo{grid-template-columns:28fr 28fr 31fr 13fr;
    grid-template-rows:minmax(var(--ix-r1),auto) var(--ix-r2)}
  .mp-ix-a{grid-area:1/1/3/2}
  .mp-ix-copy{grid-area:1/2/2/3}
  .mp-ix-panel{grid-area:1/3/2/5}
  .mp-ix-b{grid-area:2/2/3/3}
  .mp-ix-c{grid-area:2/3/3/4}
  .mp-ix-d{grid-area:2/4/3/5}
}

/* ---- BAND 7, POWER: the mirror ----------------------------------------
   dm_3 y 258..684. Photo | photo | photo across the top; white claim, red
   panel, and the RIGHT photo running down through both rows. The white claim
   block hangs 76px below the red panel, on white, so the bold claim sits
   outside the panel rather than inside it. That hang is grid row 3. */
.mp-px-mo{display:grid;width:100%;
  --px-r1:clamp(140px,15.0vw,246px);--px-r2:clamp(150px,15.6vw,255px);
  /* The hang is the comp's, and it is a hang, not a margin: the claim's last
     line has to clear the panel beside it. Sized to that and no further, since
     everything past the last line of type is white space the band has to pay
     for twice, once here and again in the note block below. */
  --px-hang:clamp(22px,2.4vw,38px);
  --px-m1:clamp(118px,31vw,168px)}

@media(max-width:639.98px){
  .mp-px-mo{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:var(--px-m1) auto auto var(--px-m1)}
  .mp-px-a{grid-area:1/1/2/4}
  .mp-px-c{grid-area:1/4/3/7}
  .mp-px-claim{grid-area:2/1/3/4}
  .mp-px-panel{grid-area:3/1/4/7}
  .mp-px-b{grid-area:4/1/5/7}
}
@media(min-width:640px) and (max-width:899.98px){
  /* The red panel goes FULL BLEED in its own row here. Held to a third of a
     768px viewport it was 256px wide, and a 330-character trailering disclosure
     in a 256px column is 550px of red. The claim keeps its place beside the
     right photo, so the interlock survives the rearrangement. */
  .mp-px-mo{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:var(--px-r1) minmax(var(--px-r2),auto) auto}
  .mp-px-a{grid-area:1/1/2/3}
  .mp-px-b{grid-area:1/3/2/5}
  .mp-px-c{grid-area:1/5/3/7}
  .mp-px-claim{grid-area:2/1/3/5}
  .mp-px-panel{grid-area:3/1/4/7}
}
@media(min-width:900px){
  .mp-px-mo{grid-template-columns:28fr 43fr 29fr;
    grid-template-rows:var(--px-r1) minmax(var(--px-r2),auto) var(--px-hang)}
  .mp-px-a{grid-area:1/1/2/2}
  .mp-px-b{grid-area:1/2/2/3}
  .mp-px-c{grid-area:1/3/3/4}
  .mp-px-claim{grid-area:2/1/4/2}
  .mp-px-panel{grid-area:2/2/3/3}
}

/* ---- BAND 8, SAFETY: cells floating over full-bleed photography --------
   dm_3 y 684..1034. The photograph bleeds off the LEFT edge and stops at 50%.
   The 2x2 grid straddles its right edge: it starts inside the photo and hangs
   past it onto white. One cell is red, three are white, separated by hairlines
   drawn as a 1px gap over the line colour rather than as four borders. */
.mp-sf-stage{display:grid;width:100%;align-items:start}
.mp-sf-shot{z-index:0}
.mp-sf-cells{list-style:none;margin:0;padding:0;display:grid;z-index:1;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);box-shadow:var(--sh)}
.mp-sf-cell{background:var(--paper);color:var(--a);margin:0;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(18px,2.1vw,30px) clamp(16px,1.9vw,26px);min-width:0;
  min-height:clamp(92px,9.5vw,136px)}
.mp-sf-cell--on{background:var(--a);color:#fff}
.mp-sf-ct{font-size:clamp(12.5px,1.05vw,15px);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.45}
.mp-sf-col{z-index:2;min-width:0}
.mp-sf-body{margin:clamp(20px,2.4vw,34px) 0 0}
.mp-sf-p{font-size:var(--b);line-height:1.72;margin:0 0 14px;max-width:34ch;color:var(--ink)}
.mp-sf-note{font-size:var(--s);line-height:1.62;color:var(--mut);margin:16px 0 0;max-width:38ch}

@media(max-width:899.98px){
  .mp-sf-stage{grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:clamp(150px,42vw,300px) auto auto}
  .mp-sf-shot{grid-area:1/1/2/13}
  .mp-sf-cells{grid-area:2/1/3/13;margin:calc(-1 * clamp(30px,9vw,70px)) 20px 0}
  .mp-sf-col{grid-area:3/1/4/13;padding:clamp(28px,6vw,44px) 20px 0}
  .mp-sf-p,.mp-sf-note{max-width:46ch}
}
@media(min-width:900px){
  .mp-sf-stage{grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:clamp(60px,8.3vw,120px) auto clamp(10px,1.2vw,20px)}
  .mp-sf-shot{grid-area:1/1/4/8}
  .mp-sf-cells{grid-area:2/4/3/9}
  .mp-sf-col{grid-area:1/9/4/13;padding-right:clamp(20px,3.4vw,70px)}
}

/* --- QUESTIONS -------------------------------------------------------------
One column, because a question and its answer are read in sequence and two
columns of accordions make a shopper track which half they were in. Capped at a
reading measure rather than run to the full 1200 grid. */
.mp-faq-group{max-width:860px;margin:0 0 34px}
.mp-faq-group:last-child{margin-bottom:0}
.mp-faq-gh{font-size:var(--d4);line-height:1.3;text-transform:uppercase;letter-spacing:.02em;
font-weight:800;margin:0 0 4px}
.mp-faq-src{font-size:var(--xs);color:var(--mut);margin:0 0 14px}
.mp-faq-list{border-top:1px solid var(--line)}
.mp-faq-i{border-bottom:1px solid var(--line)}
.mp-faq-q{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
min-height:56px;padding:16px 0;cursor:pointer;font-size:var(--b);font-weight:700;line-height:1.45}
.mp-faq-q::-webkit-details-marker{display:none}
.mp-faq-q::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:7px;
border-right:2.5px solid var(--a);border-bottom:2.5px solid var(--a);
transform:rotate(45deg);transition:transform .15s}
.mp-faq-i[open] .mp-faq-q::after{transform:rotate(225deg)}
.mp-faq-q:hover{color:var(--a)}
.mp-faq-q:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.mp-faq-a{padding:0 0 20px;max-width:70ch}
.mp-faq-p{font-size:var(--b);line-height:1.66;margin:0 0 12px;color:var(--ink)}
.mp-faq-p:last-child{margin-bottom:0}
.mp-faq-ul{margin:0 0 12px;padding-left:20px}
.mp-faq-ul li{font-size:var(--b);line-height:1.6;margin:0 0 7px}
.mp-faq-notes{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--hair)}
.mp-faq-note{font-size:var(--xs);line-height:1.55;color:var(--mut);margin:0 0 7px}
.mp-faq-note:last-child{margin-bottom:0}
@media(min-width:900px){
  .mp-faq-group{max-width:900px}
}

/* ---- THE APPRAISAL DIALOG ---------------------------------------------
   A native <dialog>, so the browser owns the focus trap, the Escape key and the
   inert background rather than this file re-implementing three things browsers
   already do correctly. The backdrop is the element's own ::backdrop. */
.mp-tf-dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);padding:0;border:0;
background:var(--paper);color:var(--ink);box-shadow:var(--sh);overflow:auto}
.mp-tf-dlg::backdrop{background:rgba(12,16,22,.62)}
.mp-tf-dlg-in{padding:clamp(20px,3vw,32px)}
.mp-tf-dlg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.mp-tf-dlg-step{margin:0;font-size:var(--xs);letter-spacing:.14em;text-transform:uppercase;
font-weight:800;color:var(--mut)}
.mp-tf-dlg-x{min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--mut);
font-size:var(--xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mp-tf-dlg-x:hover{color:var(--a)}
.mp-tf-dlg-x:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.mp-tf-dlg-k{margin:0 0 8px;font-size:var(--xs);letter-spacing:.16em;text-transform:uppercase;
font-weight:700;color:var(--a)}
.mp-tf-dlg-h{margin:0;font-size:var(--d3);line-height:1.25;font-weight:800;
text-transform:uppercase;letter-spacing:0}
.mp-tf-dlg-veh{margin:10px 0 0;font-size:var(--s);color:var(--mut)}
.mp-tf-step{margin:22px 0 0;display:grid;gap:12px;align-items:start}
.mp-tf-step-t{margin:0;font-size:var(--b);font-weight:800;line-height:1.35}
/* A pill next to a pill needs air or the two radii read as one notched shape. */
.mp-tf-step .mp-fm-fld+.mp-fm-fld{margin:0}
.mp-tf-err{margin:14px 0 0;min-height:1px;font-size:var(--s);line-height:1.5;color:var(--a);font-weight:700}
.mp-tf-err:empty{margin:0}
.mp-tf-dlg-nav{display:flex;gap:12px;align-items:center;margin:22px 0 0;padding:18px 0 0;
border-top:1px solid var(--line)}
.mp-tf-next{flex:1 1 auto;min-height:52px;padding:0 26px;border:0;border-radius:var(--pill);
background:var(--a);color:#fff;font-weight:800;font-size:var(--s);letter-spacing:.09em;
text-transform:uppercase;cursor:pointer}
.mp-tf-next:hover{background:var(--a2)}
.mp-tf-back{min-height:52px;padding:0 22px;border:0;border-radius:var(--pill);background:transparent;
color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);font-weight:800;font-size:var(--s);
letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.mp-tf-back:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.mp-tf-back:focus-visible,.mp-tf-next:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp-tf-sum{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;
padding:16px 18px;background:var(--sand)}
.mp-tf-sum-k{margin:0;font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase;
font-weight:800;color:var(--mut)}
.mp-tf-sum-v{margin:0;font-size:var(--s);font-weight:700;word-break:break-word}
.mp-tf-done{margin:16px 0 0;font-size:var(--s);line-height:1.6;color:var(--mut)}
/* A select needs its own label behaviour: it always has a value box, so the
   floating label cannot key off :placeholder-shown the way the inputs do. */
.mp-fm-fld--sel{position:relative}
.mp-fm-sel{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.mp-fm-lab--sel{top:9px;transform:none;font-size:var(--xs)}
.mp-fm-fld--sel::after{content:"";position:absolute;right:22px;top:calc(50% - 2px);width:9px;height:9px;
border-right:2.5px solid var(--mut);border-bottom:2.5px solid var(--mut);
transform:rotate(45deg);pointer-events:none}
/* ---- shared form primitives -------------------------------------------
   PILL FIELDS ON LIGHT BLUE-GREY (dm_4 x=178..416 y=514..550, fill #eef1f8).
   Not a bordered rectangle: the fill IS the affordance, and the only border
   that ever appears is the focus ring. 56px tall so the tap target clears
   44px with room for the floated label. */
.mp-fm-grid{display:grid;gap:clamp(12px,1.7vw,24px);align-items:start}
.mp-fm-grid--1{grid-template-columns:minmax(0,1fr)}
.mp-fm-fld{position:relative;min-width:0}
.mp-fm-in{width:100%;min-height:56px;padding:22px 24px 8px;border:0;border-radius:var(--pill);
  background:#eef1f8;color:var(--ink);font-family:var(--ff);font-size:var(--s);line-height:1.4;
  appearance:none;-webkit-appearance:none}
.mp-fm-in::placeholder{color:transparent}
.mp-fm-in:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp-fm-in--sel{padding-right:44px;cursor:pointer}
.mp-fm-fld--area .mp-fm-in{min-height:56px;border-radius:26px;resize:vertical}
.mp-fm-fld--sel::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);pointer-events:none}
.mp-fm-lab{position:absolute;left:25px;right:24px;top:50%;transform:translateY(-50%);
  font-size:var(--s);line-height:1.2;color:var(--mut);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .13s ease,font-size .13s ease}
.mp-fm-in:focus ~ .mp-fm-lab,.mp-fm-in:not(:placeholder-shown) ~ .mp-fm-lab,.mp-fm-fld--sel .mp-fm-lab{
  top:15px;transform:none;font-size:var(--xs);letter-spacing:.04em}
.mp-fm-fld--area .mp-fm-lab{top:19px;transform:none}
.mp-fm-fld--area .mp-fm-in:focus ~ .mp-fm-lab,.mp-fm-fld--area .mp-fm-in:not(:placeholder-shown) ~ .mp-fm-lab{top:13px}
.mp-fm-req{color:var(--a);font-weight:800;padding-left:2px}
.mp-fm-key{margin:0 0 14px;font-size:var(--xs);line-height:1.4;color:var(--mut)}
.mp-fm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* radios. Comp: a 16px red ring, unfilled, label in grey beside it. The whole
   label is the target so the target is 44px tall even though the ring is 20. */
.mp-fm-set{margin:22px 0 0;padding:0;border:0;min-width:0}
.mp-fm-leg{padding:0;margin:0 0 10px;font-size:var(--xs);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--mut)}
.mp-fm-opts{display:flex;flex-wrap:wrap;gap:6px 22px}
.mp-fm-opt{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font-size:var(--s);line-height:1.3;color:var(--ink)}
.mp-fm-optt{min-width:0;line-height:1.3}
.mp-fm-radio{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;
  border:2px solid var(--a);border-radius:50%;background:transparent;cursor:pointer}
.mp-fm-radio:checked{box-shadow:inset 0 0 0 4px var(--a)}
.mp-fm-radio:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* BLACK PILL BUTTON WITH THE OFFSET HATCH SHADOW. At 10x the comp's shadow is
   a 1px checkerboard screen, not a blur, offset about 6px down and right, so it
   is drawn as a repeating conic gradient rather than a box-shadow. */
.mp-fm-act{position:relative;display:inline-block;margin-top:0}
.mp-fm-act::before{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--pill);
  transform:translate(7px,7px);
  background-image:repeating-conic-gradient(var(--ink) 0% 25%,transparent 0% 50%);
  background-size:2px 2px}
.mp-fm-act--light::before{background-image:repeating-conic-gradient(#5c0b0b 0% 25%,transparent 0% 50%)}
.mp-fm-btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 40px;border:0;border-radius:var(--pill);background:var(--coal);color:#fff;
  font-family:var(--ff);font-weight:800;font-size:var(--s);letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:background .15s;text-decoration:none}
.mp-fm-btn:hover{background:#000}
/* The call to action that stands in for an unrouted form: the house pill as a
   real link, and the phone as a quieter link beside it. 44px targets. */
.mp-fm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:26px}
.mp-fm-tel{display:inline-flex;align-items:center;min-height:44px;font-size:var(--s);font-weight:700;
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mp-fm-tel:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-fm-tel--light{color:#fff}
.mp-fm-tel--light:focus-visible{outline-color:#fff}
.mp-tf-call{margin:0}
.mp-cf-lede{margin:0 0 6px;max-width:52ch;font-size:var(--b);line-height:1.6;color:#fff}
.mp-fm-btn:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.mp-fm-plate{width:100%;height:100%;background:var(--coal);
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px)}

/* ---- BAND 11: VALUE YOUR TRADE, the broken frame ----------------------
   dm_4 native: frame x=117..1002 y=430..714, 3px red. Top edge = 48px stub,
   gap 165..548 holding the kicker, line 549..1002. Bottom edge = 48px stub,
   gap 165..339 holding the SUBMIT pill, line 340..1002.

   Built as three stacked rows. Each rail is a flex row whose line segments are
   real elements and whose gap is the absence of one; the vertical rails are
   drawn from the rail's own centre so the rectangle closes at the corners
   without a top or bottom border ever existing. Nothing is painted over
   anything: the proof hit-tests the middle of both gaps. */
/* THE FRAME IS SIZED TO ITS CONTENT, NOT TO THE GRID.
   Run to the full 1200 measure it was a red rectangle roughly 1300px wide
   holding one text field, a hint and a button, all of them in the left third,
   with the whole right half empty. The broken border is the comp's move and it
   survives; what changes is that the frame now stops where the form stops. */
.mp-tf-frame{--tf-ind:clamp(34px,5.2vw,74px);position:relative;display:grid;grid-template-rows:auto 1fr auto;max-width:820px}
.mp-tf-rail{position:relative;display:flex;align-items:center;gap:14px}
.mp-tf-rail--top{min-height:26px}
.mp-tf-rail--bot{min-height:58px}
.mp-tf-line{flex:0 0 auto;height:3px;background:var(--a)}
/* stub + rail gap has to equal the body's own content indent, which is
   border-left (3px) + padding-left (--tf-ind). That 3px is why this is not
   simply --tf-ind minus the gap, and it is what puts the kicker, the heading,
   the first field and the submit pill on ONE vertical line at every width. */
.mp-tf-line--stub{width:calc(var(--tf-ind) - 11px)}
.mp-tf-line--run{flex:1 0 24px}
.mp-tf-vr{position:absolute;width:3px;background:var(--a)}
.mp-tf-rail--top .mp-tf-vr{top:calc(50% - 1.5px);bottom:0}
.mp-tf-rail--bot .mp-tf-vr{top:0;bottom:calc(50% - 1.5px)}
.mp-tf-vr--l{left:0}
.mp-tf-vr--r{right:0}
.mp-tf-kick{flex:0 1 auto;min-width:0;margin:0;font-size:var(--xs);line-height:1.4;letter-spacing:.09em;
  text-transform:uppercase;font-weight:800;color:var(--ink)}
.mp-tf-body{border-left:3px solid var(--a);border-right:3px solid var(--a);
  padding:clamp(14px,1.9vw,26px) var(--tf-ind) clamp(20px,2.6vw,34px)}
.mp-tf-head{margin:0 0 clamp(14px,1.6vw,20px)}
.mp-tf-head .mp-h2{border-left:0;padding-left:0;max-width:none}
.mp-tf-note{margin:18px 0 0;padding-left:calc(var(--tf-ind) + 3px)}
.mp-tf-lede{margin:0 0 clamp(20px,2.4vw,30px);max-width:60ch;font-size:var(--s);line-height:1.6;color:var(--mut)}

/* THE ONE FIELD, AND ITS POPUP.
   The combobox is the only control in the frame, so it is given the width the
   nine pills used to share rather than being left as a lonely third of a row.
   The popup is positioned off the field's own box (.mp-fm-fld is already
   position:relative), sits above the bottom rail, and is a real element in the
   document from the first byte so aria-controls always resolves. */
.mp-tf-combo{position:relative;z-index:3;max-width:none}
.mp-tf-in{min-height:64px;padding-top:26px;padding-bottom:10px;font-size:var(--b)}
.mp-tf-guard{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}
.mp-tf-list{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;margin:0;padding:8px;
  list-style:none;background:#fff;border:3px solid var(--ink);border-radius:26px;
  max-height:min(46vh,318px);overflow-y:auto;overscroll-behavior:contain}
.mp-tf-list[hidden]{display:none}
.mp-tf-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 18px;
  border-radius:var(--pill);font-size:var(--s);line-height:1.35;color:var(--ink);cursor:pointer}
.mp-tf-opt:hover{background:#eef1f8}
.mp-tf-opt[aria-selected="true"]{background:var(--coal);color:#fff}
.mp-tf-meta{margin-left:auto;padding-left:12px;flex:0 0 auto;font-size:var(--xs);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--mut)}
.mp-tf-opt[aria-selected="true"] .mp-tf-meta{color:#c9ced8}
.mp-tf-hint{margin:12px 0 0;max-width:64ch;font-size:var(--xs);line-height:1.5;color:var(--mut)}
.mp-tf-live{position:absolute}

/* ---- BAND 13: BEST PRICE GUARANTEE, the box off the viewport ----------
   dm_5 native: photo band y=177..532 full bleed; white 3px box top y=238,
   bottom y=470, right x=560, LEFT EDGE ABSENT because it is off the canvas.
   Red rule x=92..94 y=290..313, heading indented 28px past it, body copy
   returning to the rule's own left edge.

   The negative margin is safe because the band clips: a left overflow is not
   scrollable in LTR and overflow:hidden guarantees it never reaches
   documentElement.scrollWidth. The proof measures the box's client left and
   requires it to be genuinely negative. */
.mp-gt{position:relative;padding:0;overflow:hidden;background:var(--coal);isolation:isolate}
.mp-gt-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end}
.mp-gt-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:right center}
.mp-gt-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.91) 38%,rgba(9,11,15,.78) 52%,rgba(9,11,15,.34) 72%,rgba(9,11,15,.06) 100%)}
.mp-gt-stage{position:relative;padding:clamp(46px,6vw,96px) 0}
.mp-gt-box{--gt-bl:clamp(18px,3.4vw,48px);position:relative;margin-left:calc(-1 * var(--gt-bl));
  width:calc(92% + var(--gt-bl));border:3px solid rgba(255,255,255,.94);
  padding:clamp(30px,3.6vw,52px) clamp(24px,3.4vw,48px) clamp(30px,3.6vw,52px)
    calc(var(--gt-bl) + clamp(20px,8.2vw,118px))}
.mp-gt-head{margin:0 0 clamp(18px,2.2vw,30px)}
.mp-gt-head .mp-h2{border-left-color:var(--a);color:#fff;max-width:none}
.mp-gt-p{margin:0 0 12px;max-width:46ch;font-size:var(--b);line-height:1.62;color:#e9ecf1}
.mp-gt-note{margin:20px 0 0;max-width:52ch;font-size:var(--xs);line-height:1.55;color:#bcc4cf}
@media(min-width:900px){.mp-gt-box{width:calc(50% + var(--gt-bl))}}

/* ---- BAND 14: CONTACT / CAN'T FIND IT --------------------------------
   dm_5 native: left column x=91..375, red panel x=423..1119 bleeding off the
   right edge, y=613..1123. Panel fields are a 4 column grid with spans:
   Type 2 / Year from 1 / Year to 1, Make 2 / Model 2, Price 2 / Trim 1 /
   Colour 1, message 4. The vehicle art is multiplied into the red along the
   bottom and masked out before it reaches the copy. */
.mp-cf-in{max-width:1560px;margin:0 auto}
.mp-cf-grid{display:grid;gap:clamp(28px,3.4vw,52px)}
.mp-cf-col{min-width:0}
.mp-cf-kick{margin:0 0 18px;font-size:var(--xs);letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--mut)}
.mp-cf-p{margin:0 0 16px;max-width:44ch;font-size:var(--s);line-height:1.68;color:var(--ink)}
.mp-cf-form{margin-top:26px}
.mp-cf-form .mp-fm-grid{max-width:340px}
.mp-cf-form .mp-fm-act{margin-top:26px}
.mp-cf-panel{position:relative;overflow:hidden;isolation:isolate;background:var(--a);color:#fff;
  padding:clamp(30px,4vw,60px) clamp(24px,3.4vw,52px) clamp(40px,5vw,72px)}
/* The mask lives on the IMAGE, never on the wrapper. A mask on the wrapper
   creates a stacking context that isolates its children, and the ghost then
   composites normally instead of multiplying into the red: the truck comes back
   as a white truck sitting on a red panel, which is exactly wrong. On the image
   itself the stacking context isolates only its descendants, and the element
   still blends with its own backdrop. */
.mp-cf-ghost{position:absolute;left:0;right:0;bottom:0;height:54%;display:flex;
  align-items:flex-end;justify-content:center;pointer-events:none}
.mp-cf-gimg{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) contrast(.55) brightness(.92);mix-blend-mode:multiply;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 46%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 46%)}
.mp-cf-panel-in{position:relative;z-index:1}
.mp-cf-head{margin:0 0 clamp(22px,2.8vw,36px)}
.mp-cf-head .mp-h2{border-left:0;padding-left:0;color:#fff;max-width:22ch}
.mp-cf-panel .mp-fm-in{background:#f7f8fc}
.mp-cf-panel .mp-fm-in:focus-visible{outline-color:#fff}
.mp-cf-panel .mp-fm-btn:focus-visible{outline-color:#fff}
.mp-cf-panel .mp-fm-key{color:#ffe0e2}
.mp-cf-panel .mp-fm-key .mp-fm-req{color:#fff}
.mp-cf-find{margin:0}
.mp-cf-consent{margin:20px 0 24px;max-width:70ch;font-size:var(--xs);line-height:1.55;color:#ffe6e8}
@media(min-width:640px){.mp-cf-panel .mp-fm-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .mp-cf{padding-right:0}
  .mp-cf-in{padding-left:clamp(20px,4.2vw,92px)}
  .mp-cf-grid{grid-template-columns:minmax(250px,26%) minmax(0,1fr);align-items:start}
  .mp-cf-panel .mp-fm-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mp-cf-panel .mp-fm-fld--s2{grid-column:span 2}
  .mp-cf-panel .mp-fm-fld--s3{grid-column:span 3}
  .mp-cf-panel .mp-fm-fld--s4{grid-column:span 4}
}

.bx-hdr,.bx-ftr{--bx-accent:#bf0f0f;--bx-bg:#ffffff;--bx-fg:#111827;box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.bx-hdr{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bx-bg);color:var(--bx-fg);border-bottom:1px solid rgba(0,0,0,.1);flex-wrap:wrap}
.bx-hdr *,.bx-ftr *{box-sizing:border-box}
.bx-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;color:var(--bx-fg);text-decoration:none;border-radius:8px;font-size:15px}
.bx-back:hover{background:rgba(0,0,0,.05)}
.bx-back:focus-visible,.bx-tel:focus-visible,.bx-nav a:focus-visible,.bx-brand:focus-visible{outline:3px solid var(--bx-accent);outline-offset:2px}
.bx-brand{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:4px}
.bx-logo{max-height:34px;width:auto;display:block}
.bx-wordmark{font-weight:700;font-size:17px;color:var(--bx-fg)}
.bx-tel{margin-inline-start:auto;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:8px;background:var(--bx-accent);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.bx-nav{flex-basis:100%}
.bx-nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:6px 0 0;padding:0}
.bx-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;color:var(--bx-fg);text-decoration:none;font-size:14px;border-radius:6px;opacity:.85}
.bx-nav a:hover{background:rgba(0,0,0,.05);opacity:1}
.bx-ftr{padding:24px 16px;background:#0f172a;color:#e2e8f0;font-size:14px}
.bx-ftr a{color:#e2e8f0}
.bx-ftr-id{display:block}
.bx-ftr-logo{max-height:30px;width:auto;display:block;margin-bottom:8px}
.bx-ftr address{font-style:normal;opacity:.9}
.bx-ftr-links{margin-top:12px;display:flex;flex-wrap:wrap;gap:14px}
.bx-ftr-legal{margin:14px 0 0;opacity:.65;font-size:12px;line-height:1.5}
@media(min-width:768px){.bx-nav{flex-basis:auto;margin-inline-start:12px}.bx-nav ul{margin-top:0}}

/* ---- breadcrumb and related lines ---------------------------------------- */
.mp-crumbs{background:var(--paper);border-bottom:1px solid var(--line)}
.mp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0 auto;padding:10px 20px;
font-size:var(--xs);line-height:1.5;color:var(--mut)}
.mp-crumbs li+li::before{content:"/";margin:0 8px;color:#9aa3b2}
.mp-crumbs a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
display:inline-block;padding:4px 0}
.mp-crumbs a:hover{color:var(--a)}
.mp-crumbs a:focus-visible,.mp-rel-a:focus-visible,.mp-rel-x:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.mp-rel-list{list-style:none;display:grid;gap:12px;margin:26px 0 0;padding:0;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mp-rel-i{display:block}
.mp-rel-a{display:flex;flex-direction:column;gap:4px;min-height:48px;padding:14px 16px;background:var(--paper);
box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.mp-rel-a:hover{box-shadow:inset 0 0 0 2px var(--a)}
.mp-rel-n{font-weight:800;font-size:var(--b);line-height:1.3}
.mp-rel-s{font-size:var(--xs);color:var(--mut);line-height:1.4}
.mp-rel-more{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0}
.mp-rel-x{display:inline-block;padding:10px 0;color:var(--a);font-weight:700;font-size:var(--s);
text-decoration:underline;text-underline-offset:3px}

.mp-pic{display:contents}