/* pp-machine.css — machine pages (Nov 10 2026, see pp-machine.js). Hero always dark with the car small in the
   bottom-right corner; "About your car" on the light surface; the catalog's filter groups stay on the dark panel. */
body.pm header.pm-hero{position:relative;overflow:hidden;background:#0E0D0B;color:#F4F6F8;min-height:100vh;min-height:calc(100svh + var(--pp-bleed,0px));display:flex;align-items:flex-end;padding-bottom:clamp(56px,7vw,96px)}
body.pm header.pm-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 100%,rgba(217,0,8,.16),rgba(14,13,11,0) 60%);pointer-events:none;z-index:0}
body.pm header.pm-hero:not(.has-vhero){background:linear-gradient(180deg,rgba(14,13,11,.55) 0%,rgba(14,13,11,.86) 70%,#0E0D0B 100%),var(--pm-bg,none) center/cover no-repeat,#0E0D0B}
body.pm header.pm-hero>.wrap{position:relative;z-index:2;width:100%}
body.pm header.pm-hero .wrap>*{max-width:min(62ch,58%)}
body.pm header.pm-hero h1{color:#fff}
body.pm header.pm-hero .lede{color:#D6D9DE!important;opacity:1!important}
body.pm header.pm-hero .eyebrow{color:#fff;opacity:.8}
body.pm header.pm-hero .mlink{color:#fff;border-color:rgba(255,255,255,.4)}
.pm-car{position:absolute;z-index:1;right:max(24px,calc((100vw - 1280px) / 2));bottom:clamp(20px,3vw,40px);width:clamp(240px,30vw,420px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));pointer-events:none}
@media(max-width:900px){body.pm header.pm-hero .wrap>*{max-width:100%}body.pm header.pm-hero{padding-bottom:170px}.pm-car{width:210px;right:16px;bottom:18px}}
/* About your car */
.pm-about{background:#F4F6F8;color:#0E0D0B;padding:clamp(56px,7vw,96px) 0}
.pm-about h2{margin:0}
.pm-intro{max-width:64ch;margin:16px 0 0;font-family:var(--w-body,'Barlow Semi Condensed',sans-serif);font-size:20px;line-height:1.55;color:#3A3D42}
.pm-about .wpd-stats{margin:36px 0 48px}
.pm-h3{margin:0 0 16px;font-family:var(--w-disp,'Rajdhani',sans-serif);font-weight:700;font-size:25px;color:#0E0D0B}
.pm-likes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pm-likes>div{background:#fff;border:1px solid #DDE1E6;border-top:3px solid #D90008;border-radius:10px;padding:20px}
.pm-likes b{display:block;font-family:var(--w-disp,'Rajdhani',sans-serif);font-weight:700;font-size:21px;line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:#0E0D0B}
.pm-likes p{margin:8px 0 0;font-family:var(--w-body,'Barlow Semi Condensed',sans-serif);font-size:17px;line-height:1.5;color:#3A3D42}
@media(max-width:760px){.pm-likes{grid-template-columns:1fr}}
.pm-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pm-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #0E0D0B;border-radius:6px;color:#0E0D0B;background:#fff;font-family:var(--w-body,'Barlow Semi Condensed',sans-serif);font-weight:600;font-size:16px;text-decoration:none}
.pm-links a:first-child{background:#D90008;border-color:#D90008;color:#fff}
.pm-links a:hover{border-color:#D90008}
/* sections that were built for a dark page read dark again */
body.pm section.vinfo:not(.lt):not(.bx-dark){background:#0E0D0B;color:#F4F6F8}
/* dark sections: headings and ledes read light */
body.pm section.vinfo:not(.lt):not(.bx-dark) h2,body.pm section.vinfo:not(.lt):not(.bx-dark) h3{color:#fff}
body.pm section.vinfo:not(.lt):not(.bx-dark) .lede,body.pm section.vinfo:not(.lt):not(.bx-dark) p{color:#C7CBD1}
body.pm section.vinfo:not(.lt):not(.bx-dark) .eyebrow{color:#fff;opacity:.75}

/* Nov 12 2026 (Scott, "Unify all the landing pages"): machine heroes open full screen like every other landing hero (pp-hero.css). */
body.pm header.pm-hero h1{text-wrap:balance}
@media(max-width:900px){body.pm header.pm-hero{padding-top:calc(124px + env(safe-area-inset-top,0px));padding-bottom:calc(150px + var(--pp-bleed,0px))}}
.pm-car{margin-bottom:var(--pp-bleed,0px)}
/* the machine's wordmark in place of the generated car (Scott, Nov 12 2026) */
.pm-car.pm-mark{width:clamp(220px,26vw,380px);bottom:clamp(96px,9vw,150px);filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
@media(max-width:900px){.pm-car.pm-mark{width:170px;bottom:92px}}
/* the maker's lettermark at the top of the hero, small, as the accent (Scott, Nov 12 2026) */
body.pm header.pm-hero .wrap>.pm-make{display:block;width:64px;height:64px;margin:0 0 18px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));animation:pmMake .7s cubic-bezier(.2,.9,.25,1) both}
@keyframes pmMake{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:900px){body.pm header.pm-hero .wrap>.pm-make{width:48px;height:48px;margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){body.pm header.pm-hero .wrap>.pm-make{animation:none}}
/* Nov 13 2026 (Scott, "Fix the pages... the same cool pages"): car pages follow the /tires rhythm — dark video hero, then
   white sections; the only dark band mid-page is a real photo. The number bands (Pro R 225→500, Xpedition 85→150, Z10
   tune) read light now. */
body.pm .bx-band,body.pm .z10band{background:#fff;color:#141210;border-top:1px solid #E4E1DA;border-bottom:1px solid #E4E1DA}
body.pm .bx-band .k,body.pm .z10band .cflock span{color:#6B6F76;border-color:#DAD6CC}
body.pm .bx-band h2,body.pm .z10band h2{color:#141210}
body.pm .bx-band p,body.pm .z10band p{color:#3A362C}
body.pm .bx-band .alt,body.pm .z10band .z10cta .alt{color:#141210;border-color:#141210}
body.pm .z10band .z10rungs li{background:#F4F6F8;border-color:#E4E1DA;color:#141210}
body.pm .z10band .z10rungs b{border-color:#DAD6CC;color:#141210}
body.pm .z10band .z10rungs span{color:#6B6F76}
body.pm .z10band .z10rungs i{color:#141210}
body.pm .z10band .z10rungs li.note{color:#6B6F76;background:none}
body.pm .z10band .cflock img{filter:invert(1)}
body.pm .bx-band .bx-rungs li,body.pm .bx-band .bx-rungs a{border-color:#E4E1DA;background:#F4F6F8;color:#141210}
body.pm .bx-band .bx-rungs li.top,body.pm .bx-band .bx-rungs li.top a{border-color:var(--red)}
body.pm .bx-band .bx-rungs b{border-color:#DAD6CC;color:#141210}
body.pm .bx-band .bx-rungs b small{color:#6B6F76}
body.pm .bx-band .bx-rungs em{color:#141210}
body.pm .bx-band .bx-rungs span{color:#6B6F76}
body.pm .bx-band .bx-rungs i{color:#141210}
/* the panels inside the sections that used to be dark: white cards with a hairline, like the tire and wheel cards */
body.pm .bx-fuels,body.pm .bx-steps{background:#E4E1DA;border-color:#E4E1DA}
body.pm .bx-fuel,body.pm .bx-steps>div{background:#fff}
body.pm .bx-fuel .lab{color:#141210}
body.pm .bx-fuel .tiers a{color:#141210;border-color:#DAD6CC}
body.pm .bx-fuel p{color:#3A362C}
body.pm .bx-fuel .buy{border-color:#E4E1DA}
body.pm .bx-fuel .buy span{color:#6B6F76}
body.pm .bx-fuel .buy button,body.pm .bx-fuel .buy a{color:#141210;border-color:#141210}
body.pm .bx-fuel .buy button:focus-visible,body.pm .bx-fuel .tiers a:focus-visible{outline-color:#141210}
body.pm .bx-steps p{color:#3A362C}
body.pm .bx-aside{background:#fff;border-color:#E4E1DA}
body.pm .bx-aside b{color:#141210}
body.pm .bx-aside span{color:#3A362C}
body.pm .bx-aside a{color:#141210}