/* P&E Sales Module, 2026 face-lift. Spec: specs/2026-10-19-aapex-facelift-design.md
   Loaded after the Webflow stylesheets; every rule is scoped to [data-pe26] or a pe- class
   so the nav partials and verbatim Webflow blocks keep their own styling. */

[data-pe26] {
  --pe-gold: #ffcf3f;
  --pe-black: #000000;
  --pe-ink: #111111;
  --pe-panel: #1a1a1a;
  --pe-line: #2a2a2a;
  --pe-white: #ffffff;
  --pe-paper: #f6f6f4;
  --pe-muted: #6b6b6b;
  --pe-eps: #4a60ac;
  --pe-radius: 25px;
  --pe-gutter: clamp(20px, 5vw, 80px);
  --pe-display-font: 'Bebas Neue', 'Bebasneue', 'Bebas Neue Pro', sans-serif;
  --pe-body-font: 'Inter', Arial, sans-serif;
}

/* Families: page ground, text and accent. */
[data-pe26="elite"] body { background: var(--pe-black); color: var(--pe-white); --pe-accent: var(--pe-gold); --pe-accent-text: var(--pe-gold); --pe-surface: var(--pe-panel); --pe-text-soft: #bdbdbd; }
[data-pe26="edelmann"] body { background: var(--pe-white); color: var(--pe-ink); --pe-accent: var(--pe-gold); --pe-accent-text: var(--pe-ink); --pe-surface: var(--pe-paper); --pe-text-soft: var(--pe-muted); }
[data-pe26="eps"] body { background: var(--pe-white); color: var(--pe-ink); --pe-accent: var(--pe-eps); --pe-accent-text: var(--pe-eps); --pe-surface: #eef1f9; --pe-text-soft: var(--pe-muted); }

[data-pe26] body { font-family: var(--pe-body-font); font-size: 18px; line-height: 1.55; margin: 0; }
[data-pe26] main { display: block; }

/* Type */
.pe-eyebrow { font-family: var(--pe-body-font); font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pe-accent-text); margin: 0 0 12px; }
.pe-display { font-family: var(--pe-display-font); font-weight: 400; line-height: .92; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(56px, 8vw, 128px); margin: 0 0 24px; }
.pe-display em { font-style: normal; color: var(--pe-accent-text); }
.pe-display-sub { margin: -8px 0 28px; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(28px, 3vw, 48px); line-height: 1; text-transform: uppercase; }
.pe-display-sub em { font-style: normal; color: var(--pe-accent-text); }
/* Tracked out toward the headline's width (.308em matches it exactly; Andrew had it squeezed 25%, 2026-10-23): sized at .375 of .pe-display's clamp at every width, so one em-based spacing holds the match; the negative margin cancels the trailing space letter-spacing adds after the last glyph, which would pull the centred line left. Phones keep it plain: the headline wraps there, so there is no single width to match. */
@media (min-width: 600px) { .pe-display-sub--track { font-size: clamp(21px, 3vw, 48px); letter-spacing: .231em; margin-right: -.231em; } }
.pe-section h2 { font-family: var(--pe-display-font); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(40px, 5vw, 72px); margin: 0 0 20px; }
.pe-section h3 { font-family: var(--pe-display-font); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: 1.05; margin: 0 0 8px; }
.pe-lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--pe-text-soft); max-width: 46ch; margin: 0 0 24px; }
.pe-lede--balance { text-wrap: balance; }

/* Sections */
.pe-section { padding: clamp(56px, 8vw, 120px) var(--pe-gutter); }
.pe-section--dark { background: var(--pe-black); color: var(--pe-white); }
.pe-section--light { background: var(--pe-surface); }
.pe-section--gold { background: var(--pe-gold); color: var(--pe-black); --pe-accent: var(--pe-black); --pe-accent-text: var(--pe-black); --pe-text-soft: #333333; }
.pe-section--gold .pe-eyebrow { color: var(--pe-black); }
/* Surface overrides: set on the element, so they beat the family values set on body. */
.pe-section--dark, .pe-hero--full { --pe-accent-text: var(--pe-gold); --pe-text-soft: #bdbdbd; --pe-surface: var(--pe-panel); }
[data-pe26="eps"] .pe-section--dark, [data-pe26="eps"] .pe-hero--full { --pe-accent-text: #9aa9dd; }
/* A white band inside a dark page, to break up the blacks [Andrew 2026-10-23]. Gold text does not read on white, so accent text goes to ink here; gold stays on fills (buttons, bars, borders). */
/* A registered mark inside display type: small and raised, not a full-height glyph. */
.pe-reg { font-size: .32em; line-height: 0; vertical-align: 1.1em; margin-left: .03em; letter-spacing: 0; }
.pe-section--white { background: var(--pe-white); color: var(--pe-ink); --pe-accent-text: var(--pe-ink); --pe-text-soft: var(--pe-muted); --pe-surface: var(--pe-paper); --pe-line: #e2e2e2; }
[data-pe26="eps"] .pe-section--white { --pe-accent-text: var(--pe-eps); }
.pe-stat-strip, .pe-warranty { --pe-accent-text: var(--pe-black); --pe-text-soft: #333333; }
.pe-inner { max-width: 1280px; margin: 0 auto; }
.pe-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }

/* Heroes: three shapes so pages do not share one opening. */
.pe-hero { padding: clamp(48px, 7vw, 110px) var(--pe-gutter); }
.pe-hero--split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pe-hero--full { position: relative; min-height: 72vh; display: flex; align-items: flex-end; color: var(--pe-white); background: var(--pe-black); overflow: hidden; }
.pe-hero--full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.pe-hero--full > .pe-inner { position: relative; width: 100%; }
.pe-hero--stacked { text-align: center; }
.pe-hero--stacked .pe-lede { margin-left: auto; margin-right: auto; }
.pe-hero--stacked .pe-media { margin-top: 40px; }
/* The lede takes the headline's width at every size: the copy block shrinks to its widest child, and a zero-width lede cannot be that child. */
.pe-hero__copy--fit { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.pe-hero__copy--fit .pe-lede { width: 0; min-width: 100%; max-width: none; }
.pe-hero:not(.pe-hero--full) { border-bottom: 6px solid var(--pe-accent); }

/* Photo and video frames */
.pe-media { border-radius: var(--pe-radius); overflow: hidden; background: var(--pe-surface); }
.pe-media img { display: block; width: 100%; height: auto; }
.pe-media--contain img { object-fit: contain; padding: 24px; box-sizing: border-box; }
.pe-media--wide { max-width: 900px; margin-left: auto; margin-right: auto; }
.pe-media--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.pe-media--chart { max-width: 1000px; margin: clamp(40px, 5vw, 72px) auto 0; background: var(--pe-white); border: 1px solid #dcdcdc; padding: clamp(12px, 2vw, 32px); }
.pe-video { border-radius: var(--pe-radius); overflow: hidden; }
.pe-logo { display: block; height: 56px; width: auto; margin-bottom: 24px; }
.pe-hero--stacked .pe-logo { margin-left: auto; margin-right: auto; }

/* Numbers */
.pe-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; background: var(--pe-gold); color: var(--pe-black); }
.pe-stat-strip > div { padding: 40px 28px; border-right: 2px solid rgba(0,0,0,.15); text-align: center; }
.pe-stat-strip > div:last-child { border-right: 0; }
.pe-stat-strip b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(64px, 7vw, 112px); line-height: .9; }
.pe-stat-strip span { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
/* Desktop: figures larger and more dominant [Andrew 2026-10-23]. Bundles carries phrases, not figures ("1964 - 2022"), and wraps at the full size, so it stops short of it. */
@media (min-width: 1082px) {
  .pe-stat-strip b { font-size: clamp(96px, 9.5vw, 168px); }
  .pe-stat-strip.pe-bund-stats b { font-size: clamp(68px, 7vw, 136px); white-space: nowrap; }
}
.pe-big-number { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.pe-big-number b { font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(120px, 18vw, 260px); line-height: .82; color: var(--pe-accent-text); }
[data-pe26="edelmann"] .pe-big-number b { background: linear-gradient(var(--pe-gold), var(--pe-gold)) no-repeat left bottom / 100% .12em; }

/* Lists of points */
.pe-steps { list-style: none; counter-reset: pe-step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.pe-steps li { counter-increment: pe-step; border-top: 4px solid var(--pe-accent); padding-top: 20px; }
.pe-steps li::before { content: counter(pe-step, decimal-leading-zero); display: block; font-family: var(--pe-display-font); font-size: 64px; line-height: 1; color: var(--pe-accent-text); margin-bottom: 8px; }
.pe-steps p { margin: 0; color: var(--pe-text-soft); }
.pe-two + .pe-steps, .pe-steps + .pe-part-grid { margin-top: clamp(48px, 6vw, 88px); }
.pe-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pe-cards > div { background: var(--pe-white); border: 1px solid #dcdcdc; border-top: 4px solid var(--pe-accent); border-radius: var(--pe-radius); padding: 24px 28px; }
.pe-cards p { margin: 0; font-size: 16px; color: var(--pe-text-soft); }

.pe-callout { border: 2px solid var(--pe-accent); border-radius: var(--pe-radius); padding: clamp(28px, 4vw, 56px); background: var(--pe-surface); }
.pe-callout ul { margin: 16px 0 0; padding-left: 20px; font-size: clamp(17px, 1.2vw, 20px); }
.pe-callout li { margin-bottom: 8px; }
.pe-quote { font-family: var(--pe-display-font); font-size: clamp(28px, 3vw, 40px); line-height: 1.05; text-transform: uppercase; color: var(--pe-accent-text); margin: 24px 0 0; }

/* Tables */
.pe-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.pe-table th { font-family: var(--pe-display-font); font-weight: 400; font-size: 24px; text-align: left; color: var(--pe-accent-text); border-bottom: 2px solid var(--pe-accent); padding: 12px 16px; }
.pe-table td { padding: 14px 16px; border-bottom: 1px solid var(--pe-line); }
.pe-table--compare td { font-size: clamp(17px, 1.3vw, 22px); vertical-align: top; }
.pe-table--compare td:last-child { color: var(--pe-accent-text); font-weight: 700; }
.pe-table td small { display: block; font-size: clamp(14px, .9vw, 16px); color: var(--pe-text-soft); margin-top: 4px; }
[data-pe26="edelmann"] .pe-table td, [data-pe26="eps"] .pe-table td { border-bottom-color: #dcdcdc; }

/* Part numbers */
.pe-part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.pe-part { background: var(--pe-surface); border-radius: var(--pe-radius); overflow: hidden; display: flex; flex-direction: column; }
.pe-part img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--pe-white); }
.pe-part > div { padding: 20px 24px 24px; }
.pe-part b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: 40px; line-height: 1; color: var(--pe-accent-text); }
.pe-part p { margin: 6px 0 0; font-size: 16px; color: var(--pe-text-soft); }
.pe-part-group { margin-top: 56px; }
.pe-part-group:first-child { margin-top: 0; }
.pe-part-grid--photos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

/* EPS page: belt kits pair each part with its install video; part cards carry a type line. */
.pe-part-grid--video { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
/* The four EPST tools: one row of four on desktop, two by two on the TV and tablets [user 2026-10-27]. */
.pe-part-grid--pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1081px) { .pe-part-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .pe-part-grid--pairs { grid-template-columns: minmax(0, 1fr); } }
.pe-part > .pe-video { padding: 0; border-radius: 0; }
[data-pe26="eps"] .pe-part { border: 1px solid #d9deef; }
.pe-part h4 { font-family: var(--pe-body-font); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0 0; }
.pe-part-group > h3 { display: inline-block; border-bottom: 4px solid var(--pe-accent); padding-bottom: 6px; margin-bottom: 16px; }
.pe-part-group > .pe-two { margin-bottom: 32px; }
.pe-lede--wide { max-width: 80ch; }
/* Legacy hoses, stacked: the forced heading break goes, the copy runs full width with every other page's (below) [user 2026-10-27]. */
@media (max-width: 1081px) { .pe-lh-page h2 br { display: none; } }
.pe-two--rule { align-items: start; column-gap: 0; }
.pe-two--rule > :first-child { padding-right: clamp(32px, 5vw, 80px); }
.pe-two--rule > :last-child { border-left: 2px solid var(--pe-accent); padding-left: clamp(32px, 5vw, 80px); }
.pe-two--rule .pe-media { margin-top: 32px; }
.pe-two--rule .pe-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.pe-logo--eps { height: 88px; }
.pe-callout > p { margin: 0; }
.pe-closing { text-align: center; }
.pe-closing h2 { margin: 0; }
.pe-closing em { display: block; font-style: normal; color: var(--pe-accent-text); }

/* Legacy hoses: stacked image/text rows that alternate sides on wide screens (text stays first
   on a phone), plain figures for transparent art, tick lists, and the OE hose feature overlay. */
.pe-rows { display: grid; gap: clamp(56px, 6vw, 96px); }
.pe-figure { display: block; width: 100%; height: auto; }
.pe-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.pe-check { background: var(--pe-surface); border-top: 4px solid var(--pe-accent); border-radius: var(--pe-radius); overflow: hidden; }
/* The inspection art is a small vignette on a wide transparent canvas: crop in on it. */
.pe-check__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--pe-white); }
.pe-check__img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
.pe-check > div:last-child { padding: 20px 28px 28px; }
.pe-check p, .pe-check .pe-ticks { font-size: 16px; color: var(--pe-text-soft); margin: 0; }
.pe-note { font-size: 16px; color: var(--pe-text-soft); border-left: 4px solid var(--pe-accent); padding-left: 16px; max-width: 52ch; margin: 0; }
.pe-ticks { list-style: none; padding: 0; margin: 0 0 32px; font-size: clamp(17px, 1.3vw, 20px); }
.pe-ticks li { position: relative; padding-left: 30px; margin-bottom: 14px; }
.pe-callout > .pe-eyebrow { margin-bottom: 12px; }
.pe-ticks li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; background: var(--pe-accent); }
/* Legacy hoses: tap a gold dot and its callout box opens up out of it, title and one line,
   like the callouts on the original artwork. The dots stay hidden until js/pe26-hotspots.js
   marks the page live, so without the script the photo and its alt text stand alone. */
/* The photo is cropped tight above the hose, so the panel adds the headroom the callouts open into: the muffler's, with its picture, is the tallest. */
.pe-hotspots { position: relative; margin-top: 32px; padding-top: 170px; border-radius: var(--pe-radius); background: radial-gradient(ellipse at 50% 50%, #4a4a4a 0%, #1a1a1a 72%); }
.pe-hotspots__stage { position: relative; }
.pe-hotspots__stage > img { display: block; width: 100%; height: auto; }
.pe-hotspots-hint, .pe-hotspot { display: none; }
.pe-hotspots-live .pe-hotspots-hint { display: block; }
.pe-hotspots-live .pe-hotspot { display: block; }
.pe-hotspot { position: absolute; left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pe-hotspot::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--pe-gold); border: 2px solid var(--pe-black); box-shadow: 0 0 0 2px rgba(255,207,63,.45); transition: transform 200ms ease, background-color 200ms ease; }
.pe-hotspot::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; border: 2px solid var(--pe-gold); opacity: 0; }
/* A dot's own painting is not a tap target: the pulse ring swells 2.4x and would take taps meant for the dot next to it. */
.pe-hotspot::before, .pe-hotspot::after { pointer-events: none; }
.pe-motion .pe-hotspot::after { animation: pe-hotspot-pulse 2.4s cubic-bezier(.2,.7,.2,1) infinite; }
.pe-motion .pe-hotspot:nth-of-type(odd)::after { animation-delay: 1.2s; }
@keyframes pe-hotspot-pulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.pe-hotspot[aria-expanded="true"] { z-index: 2; }
.pe-hotspot[aria-expanded="true"]::before { background: var(--pe-white); transform: scale(1.2); }
.pe-hotspot[aria-expanded="true"]::after { animation: none; }
.pe-hotspot:focus-visible { outline: 3px solid var(--pe-gold); outline-offset: -4px; border-radius: 50%; }
@media (hover: hover) { .pe-hotspot:hover::before { transform: scale(1.25); } }
/* The box sits above the dot on a gold leader line; data-tip picks which way it runs so it stays on the photo
   ("high": below the dot on phones). Taps pass through an open box, so it never hides a dot. */
.pe-hotspot__tip { display: none; position: absolute; bottom: calc(100% + 26px); width: max-content; max-width: 250px; padding: 12px 16px 13px; border-left: 4px solid var(--pe-gold); border-radius: 4px; background: rgba(10,10,10,.94); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 15px; line-height: 1.4; color: #d6d6d6; pointer-events: none; }
.pe-hotspot__img { display: block; width: 100%; max-width: 218px; height: auto; margin: 0 0 8px; }
.pe-hotspot__tip strong { display: block; margin-bottom: 2px; font-family: var(--pe-display-font); font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--pe-white); }
.pe-hotspot__tip::after { content: ''; position: absolute; top: 100%; width: 2px; height: 37px; background: var(--pe-gold); }
.pe-hotspot[aria-expanded="true"] .pe-hotspot__tip { display: block; }
.pe-hotspot[data-tip~="right"] .pe-hotspot__tip { left: 19px; }
.pe-hotspot[data-tip~="right"] .pe-hotspot__tip::after { left: -4px; }
.pe-hotspot[data-tip~="left"] .pe-hotspot__tip { right: 19px; border-left: 0; border-right: 4px solid var(--pe-gold); text-align: right; }
.pe-hotspot[data-tip~="left"] .pe-hotspot__tip::after { right: -4px; }
.pe-hotspot[data-tip~="center"] .pe-hotspot__tip { left: 50%; transform: translateX(-50%); }
.pe-hotspot[data-tip~="center"] .pe-hotspot__tip::after { left: calc(50% - 3px); }
.pe-motion .pe-hotspot[aria-expanded="true"] .pe-hotspot__tip { animation: pe-tip-in 260ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes pe-tip-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 599px) {
  /* 20px, not 28: the fittings and switch-socket dots are about 15px apart here. */
  .pe-hotspots { padding: 24px 0 56px; }
  .pe-hotspot { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .pe-hotspot::before, .pe-hotspot::after { inset: 4px; border-width: 1.5px; }
  .pe-hotspot__tip { bottom: calc(100% + 10px); max-width: 210px; padding: 8px 11px 9px; font-size: 13px; }
  .pe-hotspot__tip strong { font-size: 18px; }
  .pe-hotspot__tip::after { height: 14px; }
  .pe-hotspot[data-tip~="right"] .pe-hotspot__tip { left: 9px; }
  .pe-hotspot[data-tip~="left"] .pe-hotspot__tip { right: 9px; }
  .pe-hotspot[data-tip~="high"] .pe-hotspot__tip { bottom: auto; top: calc(100% + 10px); }
  .pe-hotspot[data-tip~="high"] .pe-hotspot__tip::after { top: auto; bottom: 100%; }
}
@media (min-width: 1082px) { .pe-two--flip > :first-child { order: 2; } }

/* Hard parts: link buttons, the family shot, the reman warranty-rate rows and the DNA decoder. */
.pe-button { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; box-sizing: border-box; padding: 12px 26px; border: 2px solid currentColor; border-radius: 999px; color: inherit; font-family: var(--pe-body-font); font-size: 16px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; }
.pe-button::after { content: ''; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.pe-button--solid { background: var(--pe-accent); border-color: var(--pe-accent); color: var(--pe-black); }
.pe-button:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
.pe-warranty .pe-button { margin-top: 24px; }
.pe-warranty .pe-button:focus-visible { outline-color: var(--pe-black); }
@media (hover: hover) {
  .pe-button:hover { transform: translateX(4px); }
  .pe-button--solid:hover { background: var(--pe-white); border-color: var(--pe-white); }
}
.pe-media--family { max-width: 1100px; margin-left: auto; margin-right: auto; }
.pe-rates-head { margin-bottom: clamp(48px, 6vw, 88px); }
.pe-rates .pe-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.pe-rate { margin: 8px 0 32px; }
.pe-rate b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(96px, 12vw, 180px); line-height: .85; color: var(--pe-accent-text); }
.pe-rate span { display: block; max-width: 30ch; margin-top: 12px; font-size: clamp(17px, 1.3vw, 20px); color: var(--pe-text-soft); }
.pe-dna { background: var(--pe-surface); border: 2px solid var(--pe-accent); border-radius: var(--pe-radius); padding: clamp(24px, 3vw, 44px); }
.pe-dna__code { margin: 0; font-family: var(--pe-display-font); font-size: clamp(36px, 4.2vw, 76px); line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.pe-dna__code span { display: inline-block; touch-action: manipulation; padding-bottom: 6px; background: linear-gradient(var(--pe-accent), var(--pe-accent)) no-repeat left bottom / 0% 4px; transition: background-size 500ms cubic-bezier(.2,.7,.2,1), color 350ms ease; }
.pe-dna__code span:last-child { margin-left: .15em; }
.pe-dna:has(.pe-apps[open]) .pe-dna__code span { background-size: 100% 4px; color: var(--pe-accent-text); }
.pe-dna:has(.pe-apps[open]) .pe-dna__code span:nth-child(2) { transition-delay: 120ms; }
.pe-dna:has(.pe-apps[open]) .pe-dna__code span:nth-child(3) { transition-delay: 240ms; }
.pe-dna__code--egg span { background-size: 100% 4px; color: var(--pe-accent-text); transition-delay: 0ms; }
.pe-dna__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding-top: 20px; }
.pe-dna__fields > div { display: flex; flex-direction: column; border-top: 4px solid var(--pe-accent); padding-top: 12px; }
.pe-dna__fields dt { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-dna__fields dt small { display: block; font-size: 14px; font-weight: 600; }
.pe-dna__fields dd { margin: auto 0 0; padding-top: 8px; font-family: var(--pe-display-font); font-size: clamp(32px, 3vw, 48px); line-height: 1; color: var(--pe-accent-text); }
@media (max-width: 479px) { .pe-dna__fields { grid-template-columns: 1fr; } }

/* Pumps: cut-out pumps on a lit stage, the castings figure and the
   Remote Reservoirs close on gold. */
.pe-pump-hero__art { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: radial-gradient(circle at 50% 50%, #3d3d3d 0%, #1a1a1a 55%, transparent 71%); }
/* Side by side, the pump is sized to the window's height so the hero's gold rule lands at the fold:
   109px nav + 2 x 110px hero padding + 6px rule, plus a little air. */
@media (min-width: 1082px) { .pe-pump-hero__art { max-width: max(440px, calc(100vh - 360px)); justify-self: center; } }
.pe-pump-head { margin-bottom: clamp(40px, 5vw, 72px); }
.pe-pump-steps { align-items: start; }
.pe-pump-step__art { margin-bottom: 24px; border-radius: var(--pe-radius); background: var(--pe-white); }
.pe-pump-step__art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 8%; box-sizing: border-box; }
.pe-pump-steps .pe-eyebrow { margin-bottom: 6px; color: var(--pe-accent-text); }
.pe-pump-steps h3 { font-size: clamp(36px, 3vw, 48px); }
.pe-pump-steps li > p:not(.pe-eyebrow) { font-size: 17px; }
.pe-pump-steps strong { color: var(--pe-white); }
.pe-pump-steps .pe-apps__body p { font-size: 16px; line-height: 1.6; margin: 0; padding: 14px 4px 0; }
/* The castings art carries its labels in dark type: give it a light ground. */
.pe-pump-castings { box-sizing: border-box; padding: clamp(16px, 3vw, 48px); border-radius: var(--pe-radius); background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #dedede 100%); }
.pe-pump-badge { display: inline-block; margin-right: 10px; padding: 4px 12px; border-radius: 999px; background: var(--pe-black); color: var(--pe-gold); letter-spacing: .12em; }
.pe-pump-rr p { margin: 0 0 20px; font-size: 18px; }
.pe-pump-coverage { border-top: 4px solid var(--pe-black); padding-top: 16px; }
.pe-pump-coverage b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(48px, 5vw, 80px); line-height: .95; }
.pe-pump-coverage span { display: block; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pe-pump-quote { margin: clamp(48px, 6vw, 88px) auto; max-width: 900px; padding: 0; border: 0; text-align: center; }
.pe-pump-quote p { margin: 0 0 16px; font-family: var(--pe-display-font); font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; text-transform: uppercase; }
.pe-pump-quote cite { font-style: normal; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pe-pump-lineup { margin: 0; }
.pe-pump-lineup figcaption { margin-top: 16px; text-align: center; font-size: 17px; font-weight: 600; }

/* Hard-parts rail: the gold tab on the right edge of hard-parts, racks, pumps and gears that opens
   a strip of the four pages, so a rep moves between them without the main menu [user 2026-10-23].
   A <details>, so it opens with the script off; the partial's current="" marks the page it is on. */
.pe-hp-rail { position: fixed; top: 50%; right: 0; z-index: 50; display: flex; align-items: stretch; transform: translateY(-50%); background: var(--pe-gold); color: var(--pe-black); border-radius: 18px 0 0 18px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.pe-hp-rail > summary { display: flex; align-items: center; justify-content: center; width: 32px; min-height: 120px; list-style: none; cursor: pointer; border-radius: 18px 0 0 18px; }
.pe-hp-rail > summary::-webkit-details-marker { display: none; }
.pe-hp-rail > summary:focus-visible { outline: 3px solid var(--pe-black); outline-offset: -5px; }
.pe-hp-rail[open] > summary { border-right: 1px solid rgba(0,0,0,.25); }
.pe-hp-rail[open] > summary svg { transform: rotate(180deg); }
.pe-hp-rail > nav { display: flex; flex-direction: column; }
.pe-hp-rail__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 92px; height: 92px; box-sizing: border-box; padding: 8px 6px; color: inherit; text-decoration: none; font-size: 12px; font-weight: 800; line-height: 1.15; letter-spacing: .06em; text-align: center; text-transform: uppercase; border-left: 4px solid transparent; }
.pe-hp-rail__link + .pe-hp-rail__link { border-top: 1px solid rgba(0,0,0,.25); }
.pe-hp-rail__link img { width: 100%; height: 48px; object-fit: contain; }
.pe-hp-rail__link[aria-current="page"] { background: rgba(0,0,0,.12); border-left-color: var(--pe-black); }
.pe-hp-rail__link:focus-visible { outline: 3px solid var(--pe-black); outline-offset: -3px; }
@media (hover: hover) { .pe-hp-rail__link:hover { background: rgba(0,0,0,.08); } }
@media print { .pe-hp-rail { display: none; } }

/* Gears: jump links in the hero, the lineup picker (radio inputs, so it works with the script
   off; data-pe-cycle steps it while in view), outlined numerals on the three upgrades, and the
   3043 spotlight with its four cards. The lineup and 3043 are white bands either side of the
   black upgrades, so the page is not one long black run [user 2026-10-23]. The hero photo sits deeper than the shared .55, with a
   left-weighted scrim, because the lit workbench behind the lede washed out the white text. */
.pe-gear-hero > img { opacity: .6; }
.pe-gear-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 80%); pointer-events: none; }
.pe-gear-hero > .pe-inner { z-index: 1; }
.pe-gear-hero { border-bottom: 6px solid var(--pe-accent); }
/* Upright, the copy sits along the bottom: shade up from there and let the gearbox above show [user 2026-10-27]. */
@media (max-width: 1081px) { .pe-gear-hero > img { opacity: .8; } .pe-gear-hero::after { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 65%); } }
.pe-gear-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 8px 0 0; }
.pe-gear-jump a { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 10px 22px; border: 2px solid rgba(255,255,255,.4); border-radius: 999px; color: inherit; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: border-color 200ms ease, background-color 200ms ease; }
.pe-gear-jump a.pe-gear-jump__new { background: var(--pe-accent); border-color: var(--pe-accent); color: var(--pe-black); }
.pe-gear-jump a:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-gear-jump a:hover { border-color: var(--pe-accent); } }
.pe-gear-pick { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "copy stage" "thumbs stage"; column-gap: clamp(32px, 5vw, 80px); row-gap: 32px; align-items: center; }
.pe-gear-pick > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-gear-pick__copy { grid-area: copy; align-self: end; }
.pe-gear-pick__copy .pe-lede { margin-bottom: 0; }
.pe-gear-pick__stage { grid-area: stage; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 4 / 3; border-radius: var(--pe-radius); background: radial-gradient(circle at 50% 50%, #ffffff 0%, #e6e6e6 85%); overflow: hidden; }
.pe-gear-pick__stage img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 8%; box-sizing: border-box; opacity: 0; transform: scale(.94); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
#pe-gear-1:checked ~ .pe-gear-pick__stage img:nth-child(1), #pe-gear-2:checked ~ .pe-gear-pick__stage img:nth-child(2), #pe-gear-3:checked ~ .pe-gear-pick__stage img:nth-child(3), #pe-gear-4:checked ~ .pe-gear-pick__stage img:nth-child(4) { opacity: 1; transform: none; }
.pe-gear-pick__thumbs { grid-area: thumbs; align-self: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pe-gear-pick__thumbs label { display: block; aspect-ratio: 1; box-sizing: border-box; padding: 8px; margin: 0; border: 2px solid var(--pe-line); border-radius: 16px; background: var(--pe-surface); cursor: pointer; transition: border-color 200ms ease; }
.pe-gear-pick__thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
#pe-gear-1:checked ~ .pe-gear-pick__thumbs label:nth-child(1), #pe-gear-2:checked ~ .pe-gear-pick__thumbs label:nth-child(2), #pe-gear-3:checked ~ .pe-gear-pick__thumbs label:nth-child(3), #pe-gear-4:checked ~ .pe-gear-pick__thumbs label:nth-child(4) { border-color: var(--pe-accent); box-shadow: 0 0 0 2px var(--pe-accent); }
#pe-gear-1:focus-visible ~ .pe-gear-pick__thumbs label:nth-child(1), #pe-gear-2:focus-visible ~ .pe-gear-pick__thumbs label:nth-child(2), #pe-gear-3:focus-visible ~ .pe-gear-pick__thumbs label:nth-child(3), #pe-gear-4:focus-visible ~ .pe-gear-pick__thumbs label:nth-child(4) { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-gear-pick__thumbs label:hover { border-color: #6b6b6b; } }
.pe-gear-features__head { margin-bottom: clamp(48px, 6vw, 88px); }
.pe-gear-rows { display: grid; gap: clamp(64px, 7vw, 112px); }
.pe-gear-row, .pe-gear-3043 { scroll-margin-top: 120px; }
.pe-gear-row__num { display: block; margin-bottom: 12px; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(96px, 10vw, 160px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--pe-accent); }
.pe-gear-row h3 { font-size: clamp(40px, 4vw, 64px); }
.pe-gear-row p { margin: 0; max-width: 46ch; font-size: clamp(18px, 1.4vw, 22px); color: var(--pe-text-soft); }
.pe-gear-row__art { background: radial-gradient(circle at 50% 45%, #3a3a3a 0%, #111111 75%); }
.pe-gear-row__art img { aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; box-sizing: border-box; }
.pe-gear-row__art--tall img { object-fit: cover; padding: 0; }
.pe-gear-3043__badge { display: inline-block; margin-right: 12px; padding: 4px 12px; border-radius: 999px; background: var(--pe-accent); color: var(--pe-black); }
.pe-gear-3043__head h2 { max-width: 18ch; }
.pe-gear-3043__sub { margin: 0 0 12px; font-family: var(--pe-display-font); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; text-transform: uppercase; color: var(--pe-accent-text); }
.pe-gear-3043__fit { margin: 0; font-size: 17px; color: var(--pe-text-soft); }
.pe-gear-3043__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.pe-gear-3043__art { box-sizing: border-box; padding: clamp(16px, 3vw, 40px); border-radius: var(--pe-radius); background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #e6e6e6 85%); }
.pe-gear-3043__art img { display: block; width: 100%; height: auto; }
.pe-gear-3043__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pe-gear-3043__cards h3 { font-size: clamp(26px, 2.2vw, 34px); }
.pe-gear-3043__cards p { font-size: 17px; }
.pe-gear-3043__tagline { margin: clamp(48px, 6vw, 88px) 0 12px; padding-top: 24px; border-top: 4px solid var(--pe-accent); font-family: var(--pe-display-font); font-size: clamp(28px, 3vw, 44px); line-height: 1.05; text-transform: uppercase; text-align: center; }
.pe-gear-3043__legal { margin: 0; font-size: 14px; color: var(--pe-text-soft); text-align: center; }
@media (max-width: 1081px) {
  .pe-gear-pick { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "thumbs"; }
  .pe-gear-3043__body { grid-template-columns: 1fr; }
}
@media (max-width: 599px) { .pe-gear-3043__cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pe-gear-pick__stage img { transition: none; } }

/* Rack & pinion (content frozen [user]): dark-art photos sit on a lit stage, the EPS carve-out
   runs on a white ground with the EPS blue, the parc tree counts up, and the Variable Steering
   Assist comparison is a two-way toggle (radio inputs; data-pe-cycle flips it while in view). */
.pe-rp h2 em, .pe-rp h3 em { font-style: normal; color: var(--pe-accent-text); }
.pe-rp .pe-display em { color: var(--pe-accent-text); }
.pe-rp-num { border-left: 4px solid var(--pe-accent); padding-left: 14px; }
.pe-rp-h2 { font-size: clamp(44px, 5.4vw, 88px); line-height: .92; }
.pe-rp-lede { margin: 0; max-width: 60ch; font-size: clamp(18px, 1.4vw, 21px); color: var(--pe-text-soft); }
.pe-rp-hi { color: var(--pe-accent-text); font-weight: 700; }
.pe-rp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.pe-rp-stage { background: radial-gradient(ellipse at 50% 45%, #ffffff 0%, #d4d4d4 100%); }
.pe-rp-stage img { object-fit: contain; padding: 4%; box-sizing: border-box; }
.pe-rp-hero__art img { aspect-ratio: 16 / 10; }
.pe-rp-hero .pe-rp-hero__art { background: none; border-radius: 0; overflow: visible; }
.pe-rp-hero .pe-rp-hero__art img { padding: 0; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .22)); }
@media (min-width: 1082px) { .pe-rp-hero { grid-template-columns: minmax(0, 600px) minmax(0, 760px); justify-content: center; gap: clamp(40px, 4vw, 72px); } }
.pe-rp-wide img { aspect-ratio: 16 / 9; padding: 2%; }
.pe-rp-photo img { aspect-ratio: 16 / 9; object-fit: cover; }
.pe-rp-keys { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 20px; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; }
.pe-rp-keys li { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding: 28px 26px; border-top: 6px solid var(--pe-accent); border-radius: var(--pe-radius); background: var(--pe-white); color: var(--pe-ink); --pe-text-soft: var(--pe-muted); }
.pe-rp-keys h3 { margin: 0; font-size: clamp(34px, 2.8vw, 44px); line-height: .95; }
.pe-rp-keys p { margin: 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; color: var(--pe-text-soft); }
.pe-rp-od { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.pe-rp-feats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; padding: 0; margin: 0; }
.pe-rp-feats li { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 8px; align-content: start; padding: 22px 24px; border-left: 4px solid var(--pe-accent); border-radius: 0 16px 16px 0; background: var(--pe-black); }
.pe-rp-feats h3 { margin: 0; font-size: 28px; }
.pe-rp-feats p { margin: 0; font-size: 16px; color: var(--pe-text-soft); }
/* Portrait tablets keep photo-beside-cards, cards given the larger share and the photo centred on them. */
@media (min-width: 1082px) and (max-width: 1199px) and (orientation: portrait) { .pe-rp-od { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (max-width: 1081px) { .pe-rp-od { grid-template-columns: 1fr; } }
.pe-rp-row { margin-top: clamp(72px, 8vw, 128px); }
.pe-rp-row .pe-rp-lede { margin-top: 8px; }

.pe-rp-eps { background: var(--pe-white); color: var(--pe-ink); border-top: 6px solid var(--pe-eps); --pe-accent: var(--pe-eps); --pe-accent-text: var(--pe-eps); --pe-surface: #eef1f9; --pe-text-soft: #4a5468; }
.pe-rp-eps strong { color: var(--pe-ink); }
.pe-rp-eps__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 16px; }
.pe-rp-eps__eyebrow .pe-eyebrow { margin: 0; }
.pe-rp-eps__badge { padding: 6px 18px; border-radius: 999px; background: var(--pe-eps); color: var(--pe-white); font-family: var(--pe-display-font); font-size: 26px; line-height: 1; letter-spacing: .14em; }
.pe-rp-eps__head .pe-rp-lede { margin-top: 8px; }
.pe-rp-fig { margin: 0; overflow: hidden; border: 1px solid #d9deef; border-radius: var(--pe-radius); background: var(--pe-white); }
.pe-rp-fig img { display: block; width: 100%; height: auto; }
.pe-rp-fig figcaption { padding: 14px 20px; background: var(--pe-surface); color: var(--pe-text-soft); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.pe-rp-fig--group img { aspect-ratio: 3 / 2; object-fit: cover; }
.pe-rp-fig--band img { aspect-ratio: 4 / 1; object-fit: cover; }
.pe-rp-fig--shaft img { aspect-ratio: 4 / 1; object-fit: contain; padding: 4%; box-sizing: border-box; }
.pe-section--dark .pe-rp-fig { border-color: var(--pe-line); }
.pe-section--dark .pe-rp-fig figcaption { background: var(--pe-panel); }
.pe-rp-parc { margin-top: clamp(72px, 8vw, 120px); }
.pe-rp-tree { display: grid; gap: 14px; padding: clamp(20px, 3vw, 36px); border-radius: var(--pe-radius); background: var(--pe-surface); }
.pe-rp-node { padding: 16px 18px; border: 1px solid #d9deef; border-radius: 16px; background: var(--pe-white); text-align: center; }
.pe-rp-node b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(40px, 3.6vw, 60px); line-height: 1; }
.pe-rp-node span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-rp-node i { display: block; margin-top: 4px; font-family: var(--pe-display-font); font-size: 26px; font-style: normal; color: var(--pe-eps); }
.pe-rp-node--root, .pe-rp-node--hi { border-color: var(--pe-eps); background: var(--pe-eps); }
.pe-rp-node.pe-rp-node--root > *, .pe-rp-node.pe-rp-node--hi > * { color: var(--pe-white); }
.pe-rp-node--on { box-shadow: inset 0 0 0 3px var(--pe-eps); }
.pe-rp-node--on b { color: var(--pe-eps); }
.pe-rp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-rp-third { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pe-rp-arrow { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--pe-eps); }
.pe-rp-arrow::before, .pe-rp-arrow::after { content: ''; flex: 1; height: 2px; background: var(--pe-eps); }
.pe-rp-parc__copy h3, .pe-rp-anatomy h3, .pe-rp-total h3 { font-size: clamp(36px, 4vw, 64px); line-height: .95; margin: 8px 0 20px; }
.pe-rp-parc__copy p, .pe-rp-anatomy p, .pe-rp-total p { margin: 0 0 14px; font-size: 18px; color: var(--pe-text-soft); }
.pe-rp-anatomy { margin-top: clamp(72px, 8vw, 120px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid #d9deef; }
.pe-rp-anatomy__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pe-rp-anatomy .pe-rp-num { margin-bottom: 20px; }
.pe-rp-anatomy h3 { margin-top: 0; }
.pe-rp-chain { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; }
.pe-rp-chain li { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 150px; box-sizing: border-box; padding: 20px 18px; border: 1px solid #d9deef; border-top: 4px solid var(--pe-eps); border-radius: 16px; background: var(--pe-white); text-align: center; }
.pe-rp-chain span { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--pe-eps); }
.pe-rp-chain b { font-family: var(--pe-display-font); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.pe-rp-chain .pe-rp-chain__ours { border-color: var(--pe-eps); background: var(--pe-eps); }
.pe-rp-chain__ours span, .pe-rp-chain__ours b { color: var(--pe-white); }
.pe-rp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 96px); border-radius: var(--pe-radius); background: var(--pe-eps); color: var(--pe-white); overflow: hidden; }
.pe-rp-stats > div { padding: 36px 24px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; }
.pe-rp-stats > div:last-child { border-right: 0; }
.pe-rp-stats b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(64px, 6vw, 104px); line-height: .9; }
.pe-rp-stats sup { font-size: .45em; top: -.9em; }
.pe-rp-stats span { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pe-rp-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(56px, 6vw, 96px); padding: clamp(28px, 4vw, 56px); border-left: 6px solid var(--pe-eps); border-radius: var(--pe-radius); background: var(--pe-surface); }
.pe-rp-total .pe-rp-total__punch { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #c9d0e6; font-size: 20px; font-weight: 700; color: var(--pe-eps); }

.pe-rp-vsa .pe-two { align-items: start; }
.pe-rp-vsa p { font-size: 18px; color: var(--pe-text-soft); }
.pe-rp-vsa strong, .pe-rp-vsa .pe-rp-vsa__close { color: var(--pe-white); }
.pe-rp-vsa__close { font-weight: 700; }
.pe-rp-compare { position: relative; margin-top: 24px; }
.pe-rp-compare > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-rp-compare__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 2px solid var(--pe-line); border-radius: 999px; }
.pe-rp-compare__tabs label { display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; padding: 8px 16px; margin: 0; border-radius: 999px; color: var(--pe-text-soft); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background-color 300ms ease, color 300ms ease; }
#pe-rp-other:checked ~ .pe-rp-compare__tabs label[for="pe-rp-other"] { background: #3a3a3a; color: var(--pe-white); }
#pe-rp-elite:checked ~ .pe-rp-compare__tabs label[for="pe-rp-elite"] { background: var(--pe-accent); color: var(--pe-black); }
#pe-rp-other:focus-visible ~ .pe-rp-compare__tabs label[for="pe-rp-other"], #pe-rp-elite:focus-visible ~ .pe-rp-compare__tabs label[for="pe-rp-elite"] { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
.pe-rp-compare__panels { display: grid; margin-top: 16px; }
.pe-rp-compare__panels ul { grid-area: 1 / 1; list-style: none; margin: 0; padding: 12px 28px; border-left: 4px solid #3a3a3a; border-radius: 0 16px 16px 0; background: var(--pe-panel); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1), visibility 0s 400ms; }
.pe-rp-compare__panels .pe-rp-compare__elite { border-left-color: var(--pe-accent); }
.pe-rp-compare__panels li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pe-line); font-size: 18px; color: var(--pe-text-soft); }
.pe-rp-compare__panels li:last-child { border-bottom: 0; }
.pe-rp-compare__panels .pe-rp-compare__elite li { color: var(--pe-white); }
.pe-rp-mark { flex: none; width: 18px; font-weight: 700; color: #8a8a8a; }
.pe-rp-compare__elite .pe-rp-mark { color: var(--pe-accent-text); }
#pe-rp-other:checked ~ .pe-rp-compare__panels .pe-rp-compare__other, #pe-rp-elite:checked ~ .pe-rp-compare__panels .pe-rp-compare__elite { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .pe-rp-compare__tabs label:hover { color: var(--pe-white); } }


.pe-rp-cta .pe-two { align-items: center; }
.pe-rp-cta h2 { margin: 0; }
.pe-rp-cta__links { display: flex; flex-direction: column; gap: 14px; }
.pe-rp-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; box-sizing: border-box; padding: 14px 28px; border: 3px solid var(--pe-black); border-radius: 999px; color: var(--pe-black); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; text-decoration: none; transition: transform 200ms ease, background-color 200ms ease, color 200ms ease; }
.pe-rp-btn--solid { background: var(--pe-black); color: var(--pe-gold); }
.pe-rp-btn:focus-visible { outline: 3px solid var(--pe-black); outline-offset: 3px; }
@media (hover: hover) {
  .pe-rp-btn:hover { transform: translateX(4px); }
  .pe-rp-btn:not(.pe-rp-btn--solid):hover { background: var(--pe-black); color: var(--pe-gold); }
}
/* Portrait tablets up to 1199px (iPad Pro 1024) stack headline over lede too: side by side,
   the lede floats loose beside a three-line headline. */
@media (max-width: 1081px), (max-width: 1199px) and (orientation: portrait) {
  .pe-rp-head, .pe-rp-anatomy__head, .pe-rp-total { grid-template-columns: 1fr; }
  .pe-rp-head { align-items: start; row-gap: 20px; }
  .pe-rp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-rp-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-rp-chain .pe-rp-chain__ours { grid-column: 1 / -1; }
  .pe-rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-rp-stats > div { border-bottom: 1px solid rgba(255,255,255,.25); }
}
@media (max-width: 599px) {
  .pe-rp-keys, .pe-rp-feats, .pe-rp-chain { grid-template-columns: 1fr; }
  .pe-rp-chain li { min-height: 0; }
  .pe-rp-third { grid-template-columns: 1fr; }
  .pe-rp-node b { font-size: 40px; }
  .pe-rp-compare__tabs { border-radius: 20px; }
  .pe-rp-compare__tabs label { border-radius: 16px; font-size: 14px; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) { .pe-rp-compare__panels ul, .pe-rp-compare__tabs label { transition: none; } }

/* Coolers: the OEM-equivalent / universal pair on a white ground, the five-detail picker (radio
   inputs, so it works with the script off), the on-car photo strip and white stages for the
   cut-out product art. */
.pe-cool-hero-art { background: var(--pe-white); }
.pe-cool-hero-art img { padding: 4%; box-sizing: border-box; }
.pe-cool-paper { background: var(--pe-white); color: var(--pe-ink); --pe-accent-text: var(--pe-ink); --pe-text-soft: #444444; --pe-surface: var(--pe-paper); }
.pe-cool-pair { align-items: stretch; }
.pe-cool-pair .pe-callout { display: flex; flex-direction: column; }
.pe-cool-pair .pe-callout > p:not(.pe-eyebrow) { margin: 0 0 28px; font-size: clamp(17px, 1.2vw, 20px); color: var(--pe-text-soft); }
.pe-cool-badge { display: block; height: 120px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.pe-cool-badge--wide { height: 180px; }
.pe-cool-jump { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 10px 24px; border: 2px solid var(--pe-accent); border-radius: 999px; color: var(--pe-ink); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color 200ms ease; }
.pe-cool-jump:focus-visible { outline: 3px solid var(--pe-ink); outline-offset: 3px; }
@media (hover: hover) { .pe-cool-jump:hover { background: var(--pe-accent); } }
#inside, #universal { scroll-margin-top: 100px; }
.pe-cool-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pe-cool-head .pe-lede { margin-bottom: 0; }
.pe-cool-tabs { position: relative; }
.pe-cool-tabs > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-cool-tabs__menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.pe-cool-tabs__menu label { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 18px 10px; border: 2px solid var(--pe-line); border-radius: 20px; background: var(--pe-panel); color: #bdbdbd; font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; cursor: pointer; transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
.pe-cool-tabs__menu img { width: 76px; height: 76px; box-sizing: border-box; padding: 8px; border-radius: 50%; background: var(--pe-white); object-fit: contain; }
#pe-cool-1:checked ~ .pe-cool-tabs__menu label:nth-child(1), #pe-cool-2:checked ~ .pe-cool-tabs__menu label:nth-child(2), #pe-cool-3:checked ~ .pe-cool-tabs__menu label:nth-child(3), #pe-cool-4:checked ~ .pe-cool-tabs__menu label:nth-child(4), #pe-cool-5:checked ~ .pe-cool-tabs__menu label:nth-child(5) { background: var(--pe-accent); border-color: var(--pe-accent); color: var(--pe-black); }
#pe-cool-1:focus-visible ~ .pe-cool-tabs__menu label:nth-child(1), #pe-cool-2:focus-visible ~ .pe-cool-tabs__menu label:nth-child(2), #pe-cool-3:focus-visible ~ .pe-cool-tabs__menu label:nth-child(3), #pe-cool-4:focus-visible ~ .pe-cool-tabs__menu label:nth-child(4), #pe-cool-5:focus-visible ~ .pe-cool-tabs__menu label:nth-child(5) { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-cool-tabs__menu label:hover { border-color: #6b6b6b; } }
.pe-cool-tabs__panels { display: grid; }
.pe-cool-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 450ms ease, transform 600ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 600ms; }
#pe-cool-1:checked ~ .pe-cool-tabs__panels > :nth-child(1), #pe-cool-2:checked ~ .pe-cool-tabs__panels > :nth-child(2), #pe-cool-3:checked ~ .pe-cool-tabs__panels > :nth-child(3), #pe-cool-4:checked ~ .pe-cool-tabs__panels > :nth-child(4), #pe-cool-5:checked ~ .pe-cool-tabs__panels > :nth-child(5) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pe-cool-panel h3 { font-size: clamp(40px, 4vw, 64px); }
.pe-cool-panel p:not(.pe-eyebrow) { margin: 0; font-size: clamp(17px, 1.3vw, 20px); color: var(--pe-text-soft); }
.pe-cool-panel h4 { margin: 24px 0 6px; font-family: var(--pe-display-font); font-weight: 400; font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--pe-accent-text); }
.pe-cool-panel__art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--pe-radius); background: var(--pe-white); overflow: hidden; }
.pe-cool-panel__art img { width: 100%; height: 100%; box-sizing: border-box; padding: 6%; object-fit: contain; }
/* Elite vs competitor, side by side at the same scale; the photos stop at 500px, their native width [user 2026-10-27]. */
.pe-cool-panel--vs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pe-cool-panel--vs > div:first-child { max-width: 80ch; }
.pe-cool-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pe-cool-vs__side { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 4px solid #cfcfcf; border-radius: var(--pe-radius); background: var(--pe-white); }
.pe-cool-vs__side--elite { border-color: var(--pe-accent); }
.pe-cool-vs__side img { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; }
.pe-cool-vs__side img[src$=".jpg"] { aspect-ratio: 3 / 2; object-fit: cover; }
.pe-cool-vs figcaption { font-size: 16px; line-height: 1.35; color: #444444; }
.pe-cool-vs figcaption b { display: block; margin-bottom: 2px; font-family: var(--pe-display-font); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--pe-ink); }
.pe-cool-video { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* A strip the shape of the mounted cooler, radiator fins to bumper lip [user 2026-10-27]. */
.pe-cool-break { aspect-ratio: 1920 / 500; min-height: 160px; border-top: 6px solid var(--pe-gold); overflow: hidden; }
.pe-cool-break img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; }
.pe-cool-stage { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e6e6 85%); }
.pe-cool-stage img { aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; box-sizing: border-box; }
/* The kit photo is a square with the parts in a band across its middle; crop to the band [user 2026-10-27]. */
.pe-cool-stage--kit img { aspect-ratio: 12 / 5; object-fit: cover; object-position: 50% 52%; padding: 0; }
.pe-cool-both img { aspect-ratio: auto; }
.pe-cool-tail { padding-top: 0; }
.pe-cool-kit, .pe-cool-both { margin-top: clamp(64px, 7vw, 112px); }
.pe-cool-kit h3 { color: var(--pe-accent-text); }
.pe-cool-list { list-style: none; display: grid; gap: 14px; padding: 0; margin: 20px 0 0; }
.pe-cool-list li { padding-left: 18px; border-left: 4px solid var(--pe-accent); font-family: var(--pe-display-font); font-size: clamp(36px, 3.4vw, 56px); line-height: 1; text-transform: uppercase; }
@media (max-width: 1081px) {
  .pe-cool-panel, .pe-cool-video { grid-template-columns: 1fr; }
  .pe-cool-panel { align-items: start; align-content: start; }
  .pe-cool-panel__art { order: -1; }
  .pe-cool-vs { order: -1; }
}
@media (max-width: 767px) {
  .pe-cool-vs { grid-template-columns: minmax(0, 1fr); }
  .pe-cool-tabs__menu { gap: 6px; }
  .pe-cool-tabs__menu label { gap: 8px; padding: 10px 2px; border-radius: 14px; font-size: 11px; letter-spacing: 0; }
  .pe-cool-tabs__menu img { width: 48px; height: 48px; padding: 4px; }
  .pe-cool-badge { height: 96px; }
}
@media (max-width: 479px) {
  .pe-cool-tabs__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pe-cool-tabs__menu label { padding: 8px 2px; }
}
@media (prefers-reduced-motion: reduce) { .pe-cool-panel, .pe-cool-tabs__menu label { transition: none; } }

/* Filter: the Webflow hero restored [user 2026-10-23] (its .filter-* classes still live in the
   Webflow stylesheet), the scroll-scrubbed exploding filter, the cutaway flow art and the in-hand
   photo strip. Fittings is a shared white band [user 2026-10-26], so the page alternates black
   and white. The hero's motion is Webflow's own
   IX2 timing in CSS: the filter floats -5px to +10px on a 2s loop, and the two FILTER echoes
   slide 139px out and fade in once on load. Script off or reduced motion: the settled frame. */
.pe-filt-bounce { color: #333; overflow: hidden; }
.pe-filt-bounce .filter-gradient.top { transform: translateY(-139px); }
/* The bottom echo's mask only covers its own box. Offline, the local Bebas sits 14px higher than
   Typekit's and the echo's top rose 9px above the mask, a hairline in the gaps of the main word;
   clip it to the box. Not the top echo: offline its visible top runs 15px above its box. */
.pe-filt-bounce .filter-gradient.bottom { transform: translateY(139px); overflow: hidden; }
.pe-motion .pe-filt-bounce .image-151 { animation: pe-filt-float 2000ms ease-in-out infinite; }
.pe-motion .pe-filt-bounce .filter-gradient.top { animation: pe-filt-echo-up 1000ms ease-out both; }
.pe-motion .pe-filt-bounce .filter-gradient.bottom { animation: pe-filt-echo-down 1000ms ease-out both; }
@keyframes pe-filt-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(10px); } }
@keyframes pe-filt-echo-up { from { opacity: 0; transform: none; } to { opacity: 1; transform: translateY(-139px); } }
@keyframes pe-filt-echo-down { from { opacity: 0; transform: none; } to { opacity: 1; transform: translateY(139px); } }
.pe-filt-stage { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e6e6 85%); }
.pe-filt-stage img { aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; box-sizing: border-box; }
.pe-filt-sizes { position: relative; height: 2.6em; margin: -14% 6% 0; font-size: clamp(10.5px, 1.6vw, 15px); font-weight: 600; letter-spacing: .02em; color: #222222; text-align: center; }
.pe-filt-sizes span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pe-filt-flow img { display: block; width: 100%; height: auto; }
.pe-filt-flow-copy { margin-top: clamp(40px, 5vw, 72px); align-items: start; border-top: 2px solid var(--pe-accent); padding-top: clamp(32px, 4vw, 56px); }
.pe-filt-flow-copy .pe-lede { max-width: none; margin: 0; }
/* Filter scrub [user 2026-10-26]: the assembly render, reversed into stills (tools/scrub_frames.py),
   drawn on a canvas as the section scrolls, so the filter comes apart under the visitor's finger.
   On a wide screen the section pins below the sticky nav for 400vh and its three panels take the
   left column in turn, each sliding up over the last; below 1082px the stage sticks and the panels
   scroll past it. pe26-motion.js adds .is-scrub and draws; without it (script off, reduced motion)
   the panels stack and the stage shows the exploded still. Stills are white on white: multiply
   drops their ground onto the stage gradient, and isolation keeps that inside the card. */
.pe-filt-scrub__copy { align-self: center; }
.pe-filt-scrub__panel + .pe-filt-scrub__panel { margin-top: 56px; padding-top: 48px; border-top: 2px solid var(--pe-line); }
.pe-filt-scrub__panel .pe-lede { margin-bottom: 0; }
.pe-filt-scrub__photo { max-width: 360px; margin-top: 24px; }
.pe-filt-scrub__photo img { padding: 0; object-fit: cover; transform: scale(1.4); }
.pe-filt-scrub__stage { position: relative; align-self: center; border-radius: var(--pe-radius); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e6e6 85%); }
.pe-filt-scrub__stage img, .pe-filt-scrub__stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 1138 / 810; mix-blend-mode: multiply; }
.pe-filt-scrub__stage canvas { position: absolute; inset: 0; height: 100%; opacity: 0; }
.pe-filt-scrub.is-drawn .pe-filt-scrub__stage canvas { opacity: 1; }
.pe-filt-scrub.is-drawn .pe-filt-scrub__stage img { visibility: hidden; }
@media (min-width: 1082px) {
  .pe-filt-scrub.is-scrub { height: 400vh; padding-top: 0; padding-bottom: 0; }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__pin { position: sticky; top: var(--pe-scrub-top, 0px); height: calc(100vh - var(--pe-scrub-top, 0px)); display: flex; align-items: center; }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__grid { width: 100%; }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__copy { display: grid; }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__panel { grid-area: 1 / 1; align-self: center; margin: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translateY(56px); transition: opacity 450ms ease, transform 600ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 600ms; }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__panel.is-past { transform: translateY(-56px); }
  .pe-filt-scrub.is-scrub .pe-filt-scrub__panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (max-width: 1081px) {
  .pe-filt-scrub.is-scrub .pe-filt-scrub__stage { order: -1; position: sticky; top: calc(var(--pe-scrub-top, 0px) + 12px); z-index: 1; box-shadow: 0 0 0 12px var(--pe-black); }
}
/* TV and tablets: the comparison photo sits right of its copy, not under it, to cut the scroll [user 2026-10-27]. */
@media (min-width: 768px) and (max-width: 1081px) {
  .pe-filt-scrub__panel--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 40px; align-items: center; }
  .pe-filt-scrub__panel--photo > :not(.pe-filt-scrub__photo) { grid-column: 1; }
  .pe-filt-scrub__panel--photo > .pe-filt-scrub__photo { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
.pe-filt-break { height: 56vh; min-height: 280px; border-top: 6px solid var(--pe-gold); overflow: hidden; }
.pe-filt-break img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 767px) {
  .pe-filt-break { height: 40vh; }
}

/* Fluid: no warranty band, fluid sits outside the 100 year cover [user]. Temperature bars drawn
   to scale (they sweep in under .pe-motion), bottles on lit stages, the gold Honda / Acura band,
   the two-fluid table and the system requirements set in columns inside a disclosure. Temperature
   and system requirements are the shared white bands [user 2026-10-26], so the page alternates
   black and white around the gold. */
.pe-fluid-hero > img { object-position: 70% 10%; opacity: 1; } /* the bottle sits clear of the copy; no scrim [user 2026-10-27] */
.pe-fluid-hero .pe-lede { max-width: 52ch; color: #d6d6d6; }
/* Desktop only: the copy sits over the light blur left of the bottle, so a soft shade fades out before the bottle [user 2026-10-27]. */
@media (min-width: 1082px) {
  .pe-fluid-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 58%); pointer-events: none; }
  .pe-fluid-hero > .pe-inner { z-index: 1; }
}
.pe-fluid-for { margin: -8px 0 16px; font-family: var(--pe-display-font); font-size: clamp(28px, 3vw, 44px); line-height: 1; text-transform: uppercase; }
.pe-fluid-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pe-fluid-bars { display: grid; gap: 28px; }
.pe-fluid-bar__name { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-fluid-bar__track { border-radius: 999px; background: #e6e6e6; }
.pe-fluid-bar__fill { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; min-height: 64px; padding: 0 24px; border-radius: 999px; background: linear-gradient(90deg, #9aa9dd 0%, var(--pe-gold) 100%); color: var(--pe-black); }
.pe-fluid-bar__fill b { font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; }
/* To scale: -58 to +400 is 458 of the 498 degrees that -58 to +440 spans. */
.pe-fluid-bar__fill--universal { width: 92%; }
.pe-motion .pe-fluid-bar .pe-fluid-bar__fill { transition: clip-path 1200ms cubic-bezier(.2,.7,.2,1) 250ms; }
.pe-motion .pe-fluid-bar:not(.is-in) .pe-fluid-bar__fill { clip-path: inset(0 100% 0 0 round 999px); }
.pe-fluid-note { margin: 24px 0 0; font-size: 17px; color: var(--pe-text-soft); }
.pe-fluid-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pe-fluid-stage { background: radial-gradient(circle at 50% 45%, #3a3a3a 0%, var(--pe-panel) 70%); }
.pe-fluid-stage img { aspect-ratio: 4 / 5; object-fit: contain; padding: 8%; box-sizing: border-box; }
.pe-fluid-stage--light { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e6e6 85%); }
.pe-fluid-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 16px; }
.pe-fluid-points--one { grid-template-columns: 1fr; }
.pe-fluid-points article { border-top: 4px solid var(--pe-accent); padding-top: 16px; }
.pe-fluid-points h3 { font-size: clamp(26px, 2.2vw, 34px); }
.pe-fluid-points p { margin: 0; font-size: 17px; color: var(--pe-text-soft); }
.pe-fluid-table td:first-child { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-fluid-table td:last-child { color: inherit; font-weight: 400; }
.pe-fluid-reqs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: 32px; }
.pe-fluid-reqs__head h2 { margin: 0; }
.pe-fluid-makes { display: block; width: 100%; height: auto; }
.pe-fluid-reqs .pe-apps > summary { width: max-content; max-width: 100%; }
.pe-fluid-reqs .pe-apps__body ul { columns: 4 220px; column-gap: 40px; list-style: none; margin: 0; padding: 20px 4px 4px; }
.pe-fluid-reqs .pe-apps__body li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--pe-line); font-size: 15px; line-height: 1.4; }
.pe-fluid-video { max-width: 1100px; margin: clamp(48px, 6vw, 88px) auto 0; }
.pe-fluid-video .youtube-5 { margin: 0; }
@media (min-width: 1082px) { .pe-fluid-split--flip > :first-child { order: 2; } }
@media (max-width: 1081px) {
  .pe-fluid-split, .pe-fluid-reqs__head { grid-template-columns: 1fr; }
  .pe-fluid-stage { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 767px) { .pe-fluid-hero > img { opacity: .3; } }
@media (max-width: 599px) {
  .pe-fluid-points { grid-template-columns: 1fr; }
  .pe-fluid-bar__fill { min-height: 52px; padding: 0 16px; }
}

/* Bundles: the bundle photo on a white stage, the coverage strip, a challenge / bundle toggle (radio
   inputs, so it works with the script off), the full lineup on gold and the verbatim demo frame. */
.pe-bund-hero-art { background: var(--pe-white); }
.pe-bund-hero-art img { aspect-ratio: 4 / 3; object-fit: contain; }
.pe-bund-coverage { background: var(--pe-gold); color: var(--pe-black); }
.pe-bund-strip-head { margin: 0; padding: clamp(32px, 4vw, 56px) var(--pe-gutter) 0; text-align: center; font-family: var(--pe-display-font); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 4vw, 56px); line-height: 1; }
.pe-bund-flip { position: relative; }
.pe-bund-flip > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-bund-flip__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 520px; margin: 0 auto clamp(40px, 5vw, 64px); padding: 6px; border: 2px solid var(--pe-line); border-radius: 999px; }
.pe-bund-flip__menu label { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; border-radius: 999px; color: #bdbdbd; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color 250ms ease, color 250ms ease; }
#pe-bund-1:checked ~ .pe-bund-flip__menu label:nth-child(1), #pe-bund-2:checked ~ .pe-bund-flip__menu label:nth-child(2) { background: var(--pe-accent); color: var(--pe-black); }
#pe-bund-1:focus-visible ~ .pe-bund-flip__menu label:nth-child(1), #pe-bund-2:focus-visible ~ .pe-bund-flip__menu label:nth-child(2) { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-bund-flip__menu label:hover { color: var(--pe-white); } }
.pe-bund-flip__panels { display: grid; }
.pe-bund-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 500ms; }
#pe-bund-1:checked ~ .pe-bund-flip__panels .pe-bund-panel:nth-child(1), #pe-bund-2:checked ~ .pe-bund-flip__panels .pe-bund-panel:nth-child(2) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pe-bund-panel__head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.pe-bund-panel__head .pe-lede { max-width: none; }
.pe-bund-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pe-bund-cards article { background: var(--pe-panel); border-top: 4px solid var(--pe-accent); border-radius: 0 0 var(--pe-radius) var(--pe-radius); padding: 28px; }
.pe-section .pe-bund-cards h3 { font-size: clamp(26px, 2vw, 32px); }
.pe-bund-cards p { margin: 0; font-size: 17px; color: var(--pe-text-soft); }
.pe-bund-thumb { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin-bottom: 20px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e6e6 85%); overflow: hidden; }
.pe-bund-thumb img { width: 76%; height: 76%; object-fit: contain; }
.pe-bund-only { max-width: 920px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.pe-bund-only .pe-lede { max-width: none; }
.pe-bund-lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pe-bund-lineup li { border-radius: 18px; overflow: hidden; background: var(--pe-white); }
.pe-bund-lineup img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; box-sizing: border-box; }
.pe-bund-demo-head { max-width: 900px; }
.pe-bund-steps { margin: clamp(32px, 4vw, 56px) 0; }
.pe-section .pe-bund-steps h3 { margin: 0; }
.pe-bund-demo { border-radius: var(--pe-radius); overflow: hidden; background: var(--pe-white); }
/* The verbatim wrapper carries Webflow's 16:9 box, shorter than its 800px frame: let the frame set the height. */
.pe-bund-demo .layout142_image { aspect-ratio: auto; height: auto; }
.pe-bund-demo iframe { display: block; }
@media (max-width: 1081px) { .pe-bund-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pe-stat-strip.pe-bund-stats { grid-template-columns: 1fr; }
  .pe-stat-strip.pe-bund-stats > div { padding: 24px 20px; }
  .pe-bund-stats b { font-size: 60px; }
  .pe-bund-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pe-bund-flip__menu label { font-size: 14px; }
}
@media (max-width: 599px) {
  .pe-bund-cards { grid-template-columns: 1fr; gap: 16px; }
  .pe-bund-cards article { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; padding: 20px; }
  .pe-bund-thumb { grid-row: 1 / span 2; width: 72px; height: 72px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .pe-bund-panel, .pe-bund-flip__menu label { transition: none; } }

/* Warranty: the shield over a giant gold figure, the no-lifetime quote, the complete-repair
   checklist (checkboxes, so it works with the script off; a CSS counter keeps score) with the
   Lights Out hotspots verbatim on its icons, and the covered lines linking to their pages. */
.pe-warr-shield { display: block; width: clamp(72px, 7vw, 112px); height: auto; margin: 0 auto 24px; }
.pe-warranty.pe-warr-giant { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px clamp(16px, 3vw, 48px); max-width: 1280px; box-sizing: border-box; margin: 8px auto 32px; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(30px, 3.4vw, 56px); line-height: .9; text-transform: uppercase; }
.pe-warr-giant .pe-warr-fig { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.pe-warranty.pe-warr-giant b { display: block; font-size: clamp(72px, 9vw, 180px); line-height: .82; }
.pe-warr-slash { font-size: clamp(72px, 9vw, 180px); line-height: .82; opacity: .3; }
.pe-warr-word { align-self: center; text-align: left; letter-spacing: .2em; }
@media (min-width: 1700px) { .pe-warranty.pe-warr-giant { max-width: none; width: 1500px; margin-left: calc((100% - 1500px) / 2); margin-right: calc((100% - 1500px) / 2); } }
.pe-hero .pe-warr-cover-line { font-size: clamp(20px, 2vw, 28px); font-weight: 600; color: var(--pe-white); max-width: none; margin-bottom: 0; }
.pe-warr-why { background: var(--pe-panel); }
.pe-warr-quote { max-width: 1100px; margin: 0; font-family: var(--pe-display-font); font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; text-transform: uppercase; }
.pe-warr-repair-head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.pe-warr-include { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-warr-check { position: relative; counter-reset: pe-warr; }
.pe-warr-check > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-warr-check > input:checked { counter-increment: pe-warr; }
.pe-steps.pe-warr-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.pe-warr-steps li { display: flex; flex-direction: column; border-top-color: var(--pe-line); transition: border-color 250ms ease; }
.pe-warr-steps li::before { text-align: center; }
.pe-warr-steps label { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; margin: 0; padding: 20px; text-align: center; border-radius: 0 0 18px 18px; background: var(--pe-panel); font-weight: 400; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 250ms ease; }
.pe-warr-steps label::after { content: '\2713' / ''; position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid #4a4a4a; border-radius: 50%; color: transparent; font-size: 15px; font-weight: 700; line-height: 24px; text-align: center; transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
#pe-warr-1:checked ~ .pe-warr-steps li:nth-child(1), #pe-warr-2:checked ~ .pe-warr-steps li:nth-child(2), #pe-warr-3:checked ~ .pe-warr-steps li:nth-child(3), #pe-warr-4:checked ~ .pe-warr-steps li:nth-child(4), #pe-warr-5:checked ~ .pe-warr-steps li:nth-child(5) { border-top-color: var(--pe-accent); }
#pe-warr-1:checked ~ .pe-warr-steps li:nth-child(1) label, #pe-warr-2:checked ~ .pe-warr-steps li:nth-child(2) label, #pe-warr-3:checked ~ .pe-warr-steps li:nth-child(3) label, #pe-warr-4:checked ~ .pe-warr-steps li:nth-child(4) label, #pe-warr-5:checked ~ .pe-warr-steps li:nth-child(5) label { background: #2b2611; }
#pe-warr-1:checked ~ .pe-warr-steps li:nth-child(1) label::after, #pe-warr-2:checked ~ .pe-warr-steps li:nth-child(2) label::after, #pe-warr-3:checked ~ .pe-warr-steps li:nth-child(3) label::after, #pe-warr-4:checked ~ .pe-warr-steps li:nth-child(4) label::after, #pe-warr-5:checked ~ .pe-warr-steps li:nth-child(5) label::after { background: var(--pe-accent); border-color: var(--pe-accent); color: var(--pe-black); }
#pe-warr-1:focus-visible ~ .pe-warr-steps li:nth-child(1) label, #pe-warr-2:focus-visible ~ .pe-warr-steps li:nth-child(2) label, #pe-warr-3:focus-visible ~ .pe-warr-steps li:nth-child(3) label, #pe-warr-4:focus-visible ~ .pe-warr-steps li:nth-child(4) label, #pe-warr-5:focus-visible ~ .pe-warr-steps li:nth-child(5) label { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
.pe-warr-icon { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; box-sizing: border-box; height: 72px; padding: 0 28px; }
.pe-warr-icon img { display: block; width: 100%; height: 72px; object-fit: contain; }
.pe-warr-name { font-family: var(--pe-display-font); font-size: clamp(24px, 1.8vw, 30px); line-height: 1.05; text-transform: uppercase; }
.pe-warr-meter { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px 0 0; font-size: 16px; color: var(--pe-text-soft); }
.pe-warr-count::before { content: counter(pe-warr) " / 5"; font-family: var(--pe-display-font); font-size: 40px; line-height: 1; color: var(--pe-accent-text); }
.pe-warr-done { margin: 16px 0 0; min-height: 48px; text-align: center; }
.pe-warr-done span { display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--pe-accent); color: var(--pe-black); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 400ms; }
#pe-warr-1:checked ~ #pe-warr-2:checked ~ #pe-warr-3:checked ~ #pe-warr-4:checked ~ #pe-warr-5:checked ~ .pe-warr-done span { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pe-warr-covers { background: var(--pe-white); color: var(--pe-ink); --pe-accent-text: var(--pe-ink); --pe-text-soft: #444444; }
.pe-warr-covers .pe-eyebrow { display: inline-block; padding-bottom: 6px; border-bottom: 4px solid var(--pe-accent); }
.pe-warr-lines { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pe-warr-lines a { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 20px 12px 18px; border: 2px solid #e2e2e2; border-radius: 18px; color: inherit; text-decoration: none; transition: border-color 250ms ease, transform 250ms ease; }
.pe-warr-lines img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.pe-warr-lines span { font-family: var(--pe-display-font); font-size: 30px; line-height: 1; text-transform: uppercase; }
.pe-warr-lines a:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-warr-lines a:hover { border-color: var(--pe-accent); transform: translateY(-4px); } }
@media (max-width: 1081px) {
  .pe-steps.pe-warr-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pe-warr-steps li { grid-column: span 2; }
  .pe-warr-steps li:nth-child(4) { grid-column: 2 / span 2; }
  .pe-warr-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pe-warranty.pe-warr-giant { flex-direction: column; align-items: center; padding: 32px 16px; }
  .pe-warr-slash { display: none; }
  .pe-steps.pe-warr-steps { grid-template-columns: 1fr; gap: 12px; }
  .pe-warr-steps li, .pe-warr-steps li:nth-child(4) { grid-column: auto; }
  .pe-warr-steps li::before { font-size: 36px; text-align: left; }
  .pe-warr-steps label { flex-direction: row; justify-content: flex-start; align-items: center; padding: 12px 56px 12px 12px; text-align: left; }
  .pe-warr-icon { flex: none; width: 88px; height: 72px; padding: 0; }
  .pe-warr-icon img { height: 52px; }
  .pe-warr-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pe-warr-steps li, .pe-warr-steps label, .pe-warr-steps label::after, .pe-warr-done span, .pe-warr-lines a { transition: none; } }

/* Media library: category chips and a Videos / Bulletins filter (radios read through :has, so it
   works with the script off), video cards around the verbatim embeds, bulletin cards that open
   their PDF from anywhere on the card, and the Hard Parts "More" button and its hidden container
   restyled in place; the page's inline script still sets the container's inline display. */
.pe-ml-hero .pe-display { margin-bottom: 16px; }
.pe-ml-stats { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px clamp(32px, 5vw, 72px); margin: 8px 0 0; padding: 0; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-text-soft); }
.pe-ml-stats b { display: block; font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(56px, 6vw, 96px); line-height: .9; letter-spacing: 0; color: var(--pe-accent-text); }
.pe-ml-bar { padding: 20px var(--pe-gutter); background: var(--pe-panel); border-bottom: 1px solid var(--pe-line); }
.pe-ml-bar > .pe-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.pe-ml-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-ml-jump a { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 18px; box-sizing: border-box; border: 2px solid var(--pe-line); border-radius: 999px; color: var(--pe-white); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: border-color 250ms ease, color 250ms ease; }
.pe-ml-jump a:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
.pe-ml-filter { position: relative; display: grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 4px; border: 2px solid var(--pe-line); border-radius: 999px; }
.pe-ml-filter > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-ml-filter label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; margin: 0; border-radius: 999px; color: #bdbdbd; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 250ms ease, color 250ms ease; }
#pe-ml-show-all:checked ~ label[for="pe-ml-show-all"], #pe-ml-show-videos:checked ~ label[for="pe-ml-show-videos"], #pe-ml-show-docs:checked ~ label[for="pe-ml-show-docs"] { background: var(--pe-accent); color: var(--pe-black); }
#pe-ml-show-all:focus-visible ~ label[for="pe-ml-show-all"], #pe-ml-show-videos:focus-visible ~ label[for="pe-ml-show-videos"], #pe-ml-show-docs:focus-visible ~ label[for="pe-ml-show-docs"] { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) {
  .pe-ml-jump a:hover { border-color: var(--pe-accent); color: var(--pe-accent-text); }
  .pe-ml-filter label:hover { color: var(--pe-white); }
}
.pe-ml:has(#pe-ml-show-videos:checked) .pe-ml-docs, .pe-ml:has(#pe-ml-show-docs:checked) .pe-ml-vids,
.pe-ml:has(#pe-ml-show-docs:checked) .pe-ml-sec:not(:has(.pe-ml-docs)), .pe-ml:has(#pe-ml-show-docs:checked) .pe-ml-jump--videos,
.pe-ml:has(#pe-ml-show-docs:checked) .more-button { display: none; }
.pe-section.pe-ml-sec { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); scroll-margin-top: calc(10vh + 16px); }
.pe-ml-sec + .pe-ml-sec { border-top: 1px solid var(--pe-line); }
.pe-section.pe-ml-sec h2 { display: inline-block; border-bottom: 4px solid var(--pe-accent); padding-bottom: 6px; margin-bottom: clamp(24px, 3vw, 40px); }
.pe-ml-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 24px; }
.pe-ml-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 24px; }
.pe-ml-vids + .pe-ml-docs { margin-top: 24px; }
.pe-ml-card { position: relative; display: flex; flex-direction: column; background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: var(--pe-radius); overflow: hidden; transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }
.pe-ml-card > .pe-video { border-radius: 0; }
.pe-ml-card__body { padding: 20px 24px 24px; }
.pe-section .pe-ml-card h3 { font-size: 28px; margin: 0 0 8px; }
.pe-ml-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pe-text-soft); }
.pe-ml-card > .easter-egg-1 { margin-top: auto; }
.pe-ml-card--doc { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; }
.pe-ml-card--doc > a { display: block; align-self: stretch; padding: 20px 0 20px 20px; }
.pe-ml-card--doc > a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pe-ml-card--doc > a:focus-visible { outline: none; }
.pe-ml-card--doc > a:focus-visible::after { outline: 3px solid var(--pe-accent); outline-offset: -3px; }
.pe-ml-card--doc img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 17 / 22; object-fit: cover; object-position: 50% 0%; border-radius: 6px; background: var(--pe-white); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.pe-ml-pdf { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--pe-accent); color: var(--pe-black); font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .14em; }
@media (hover: hover) { html:not(.pe-playing) .pe-ml-card:hover { transform: translateY(-4px); border-color: var(--pe-accent); box-shadow: 0 14px 32px rgba(0,0,0,.5); } }
.pe-ml .more-button { position: relative; inset: auto; display: flex; gap: 12px; width: max-content; min-width: 200px; height: auto; min-height: 52px; box-sizing: border-box; margin: 32px auto 0; padding: 0 32px; border-radius: 999px; background: var(--pe-accent); color: var(--pe-black); transition: transform 250ms ease; }
.pe-ml .more-button .paragraph-22 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pe-ml .more-button::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 250ms ease; }
.pe-ml .more-button:has(+ .media-card-container[style*="flex"])::after { transform: translateY(2px) rotate(225deg); }
@media (hover: hover) { .pe-ml .more-button:hover { transform: translateY(-2px); } }
.pe-ml .media-card-container.hidden { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; height: auto; margin-top: 32px; padding: 0; border: 0; overflow: visible; background: transparent; }
@media (max-width: 767px) {
  .pe-ml-bar > .pe-inner { flex-flow: column nowrap; align-items: stretch; }
  .pe-ml-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pe-gutter) * -1); padding: 2px var(--pe-gutter); }
  .pe-ml-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-ml-filter label { padding: 0 8px; }
  .pe-ml-card__body { padding: 16px 18px 20px; }
  /* Phone: thumbnail beside the title, the description full width beneath both. */
  .pe-ml-card--doc { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 16px 18px 20px; }
  .pe-ml-card--doc > a { grid-row: 1 / span 2; padding: 0; }
  .pe-ml-card--doc > .pe-ml-card__body { display: contents; }
  .pe-ml-card--doc .pe-ml-pdf { grid-column: 2; justify-self: start; margin: 4px 0 8px; }
  .pe-section .pe-ml-card--doc h3 { grid-column: 2; margin: 0; }
  .pe-ml-card--doc p { grid-column: 1 / -1; margin-top: 16px; }
  .pe-section .pe-ml-card h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-ml-card, .pe-ml-jump a, .pe-ml-filter label, .pe-ml .more-button, .pe-ml .more-button::after { transition: none; }
  html:not(.pe-playing) .pe-ml-card:hover, .pe-ml .more-button:hover { transform: none; }
}

/* Elite hoses: the return-hose spec list sits in a "See specs" disclosure. */
.pe-callout .pe-hose-specs .pe-apps__body ul { margin: 0; padding: 14px 4px 4px 24px; }
/* Return-hose photo on white (a black hose vanishes on the dark card); text, photo and specs sit close together [user 2026-10-27]. */
.pe-hose-return .pe-lede { margin-bottom: 0; }
.pe-hose-return__art { border-radius: var(--pe-radius); background: var(--pe-white); padding: 12px 20px; }
.pe-hose-return__art img { display: block; width: 100%; height: auto; }
.pe-hose-return .pe-hose-specs { margin-top: 16px; }
@media (max-width: 1081px) { .pe-hose-return.pe-two { gap: 24px; } }

/* Turbo oil lines: a Blockage / Carbon Buildup toggle over the two failure cards (radio inputs,
   so it works with the script off). */
.pe-turbo-fail { position: relative; margin-top: 24px; }
.pe-turbo-fail > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pe-turbo-fail__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 20px; padding: 6px; border: 2px solid #dcdcdc; border-radius: 999px; }
.pe-turbo-fail__menu label { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 8px; border-radius: 999px; color: var(--pe-text-soft); font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; cursor: pointer; transition: background-color 250ms ease, color 250ms ease; }
#pe-turbo-fail-1:checked ~ .pe-turbo-fail__menu label:nth-child(1), #pe-turbo-fail-2:checked ~ .pe-turbo-fail__menu label:nth-child(2) { background: var(--pe-accent); color: var(--pe-black); }
#pe-turbo-fail-1:focus-visible ~ .pe-turbo-fail__menu label:nth-child(1), #pe-turbo-fail-2:focus-visible ~ .pe-turbo-fail__menu label:nth-child(2) { outline: 3px solid var(--pe-accent-text); outline-offset: 3px; }
@media (hover: hover) { .pe-turbo-fail__menu label:hover { color: var(--pe-ink); } }
.pe-cards.pe-turbo-fail__cards { grid-template-columns: minmax(0, 1fr); }
.pe-turbo-fail__cards > div { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 500ms; }
#pe-turbo-fail-1:checked ~ .pe-turbo-fail__cards > :nth-child(1), #pe-turbo-fail-2:checked ~ .pe-turbo-fail__cards > :nth-child(2) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 479px) { .pe-turbo-fail__menu label { font-size: 14px; letter-spacing: .04em; } }
@media (prefers-reduced-motion: reduce) { .pe-turbo-fail__menu label, .pe-turbo-fail__cards > div { transition: none; } }

/* Warranty band */
.pe-warranty { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; background: var(--pe-gold); color: var(--pe-black); border-radius: var(--pe-radius); padding: clamp(32px, 5vw, 64px); }
.pe-warranty h2 { margin: 0; }
.pe-warranty b { font-family: var(--pe-display-font); font-weight: 400; font-size: clamp(80px, 10vw, 150px); line-height: .85; }

/* Footer keeps the module's class; recolour per family. */
[data-pe26="elite"] .footer { background: var(--pe-black); color: #8a8a8a; }

/* "See applications": a native <details>, closed by default. Opens with the script off and by
   keyboard; under .pe-motion the script animates it. A grid carrying one is marked
   pe-part-grid--apps so an open card grows alone; every other part grid keeps even rows. */
.pe-part-grid--apps { align-items: start; }
.pe-apps { margin-top: 16px; }
.pe-apps > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 10px 20px; border: 2px solid var(--pe-accent); border-radius: 999px; color: var(--pe-accent-text); font-family: var(--pe-body-font); font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease; }
.pe-apps > summary::-webkit-details-marker { display: none; }
.pe-apps > summary small { font-size: 15px; font-weight: 600; opacity: .7; }
.pe-apps > summary::after { content: ''; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pe-apps[open]:not(.is-closing) > summary::after { transform: translateY(2px) rotate(225deg); }
.pe-apps > summary:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 3px; }
@media (hover: hover) { .pe-apps > summary:hover { background: color-mix(in srgb, var(--pe-accent) 10%, transparent); } }
.pe-part .pe-apps__body p { line-height: 1.6; margin: 0; padding: 14px 4px 4px; }

/* Motion (js/pe26-motion.js). Everything that hides is gated by .pe-motion, which the script
   sets only when IntersectionObserver exists and reduced motion is off; without it every element
   is visible and still. .is-done hands the element back to its own transitions (hover lift). */
.pe-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); }
.pe-motion [data-reveal].is-in:not(.is-done) { transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.pe-motion .pe-hero > img, .pe-motion .pe-hero .pe-media img { animation: pe-hero-zoom 1600ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes pe-hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.pe-motion .pe-apps__body { overflow: hidden; transition: height 350ms cubic-bezier(.2,.7,.2,1), opacity 350ms cubic-bezier(.2,.7,.2,1); }
.pe-motion .pe-apps > summary::after { transition: transform 350ms cubic-bezier(.2,.7,.2,1); }
/* Edelmann big number: the gold underline draws left to right as it reveals. */
.pe-motion[data-pe26="edelmann"] .pe-big-number[data-reveal]:not(.is-in) b { background-size: 0% .12em; }
.pe-motion[data-pe26="edelmann"] .pe-big-number[data-reveal] b { transition: background-size 900ms cubic-bezier(.2,.7,.2,1) 300ms; }

/* Hover lift: ungated by .pe-motion, but held still while a video plays (the script sets .pe-playing),
   and only on a real pointer: a touch monitor keeps :hover on the last tapped card. */
.pe-part, .pe-media, .pe-cards > * { transition: transform 250ms ease, box-shadow 250ms ease; }
@media (hover: hover) {
  html:not(.pe-playing) .pe-part:hover, html:not(.pe-playing) .pe-media:hover, html:not(.pe-playing) .pe-cards > *:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .pe-part, .pe-media, .pe-cards > * { transition: none; }
  html:not(.pe-playing) .pe-part:hover, html:not(.pe-playing) .pe-media:hover, html:not(.pe-playing) .pe-cards > *:hover { transform: none; }
}

@media (max-width: 1081px) {
  .pe-hero--split, .pe-two, .pe-big-number, .pe-warranty, .pe-cards { grid-template-columns: 1fr; }
  .pe-stat-strip > div { border-right: 0; border-bottom: 2px solid rgba(0,0,0,.15); }
  /* The four-figure strip is a 2x2 here: a divider down the middle, a rule between the rows only. */
  .pe-stat-strip:not(.pe-stat-strip--row):not(.pe-bund-stats) { grid-template-columns: 1fr 1fr; }
  .pe-stat-strip:not(.pe-stat-strip--row):not(.pe-bund-stats) > div:nth-child(odd) { border-right: 2px solid rgba(0,0,0,.15); }
  .pe-stat-strip:not(.pe-stat-strip--row):not(.pe-bund-stats) > div:nth-last-child(-n+2) { border-bottom: 0; }
  .pe-two--rule > :first-child { padding-right: 0; }
  .pe-two--rule > :last-child { border-left: 0; padding-left: 0; border-top: 2px solid var(--pe-accent); padding-top: 32px; }
}

@media (max-width: 767px) {
  /* A three-figure strip stays one row on a phone instead of wrapping 2+1. */
  .pe-stat-strip.pe-stat-strip--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-stat-strip.pe-stat-strip--row > div { padding: 32px 8px; border-bottom: 0; border-right: 2px solid rgba(0,0,0,.15); }
  .pe-stat-strip.pe-stat-strip--row > div:last-child { border-right: 0; }
  .pe-stat-strip.pe-stat-strip--row b { font-size: 56px; }
  .pe-stat-strip.pe-stat-strip--row span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .04em; }
  /* The rail tab fits the 20px phone gutter instead of covering the copy. */
  .pe-hp-rail > summary { width: 20px; }
  .pe-hp-rail > summary svg { width: 16px; height: 16px; }
  .pe-table--compare thead { display: none; }
  .pe-table--compare tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--pe-line); padding: 16px 0; }
  .pe-table--compare td { border-bottom: 0; padding: 4px 0; }
  .pe-table--compare td:first-child { grid-column: 1 / -1; padding-bottom: 12px; }
  .pe-table--compare td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-text-soft); }
}

/* Stacked (<=1081px) the photos move above the copy, so paragraph measures that suited a
   half-width column left every page left-heavy: copy runs the full content width on the
   TV and tablets [user 2026-10-27]. Desktop keeps its measures. Last in the file so it
   outranks each component's own cap. */
@media (max-width: 1081px) {
  .pe-lede, .pe-lede--wide, .pe-fluid-hero .pe-lede, .pe-note, .pe-gear-row p, .pe-rp-lede,
  .pe-cool-panel--vs > div:first-child { max-width: none; }
}