/* ---- Platform / Hero (22:1084 desktop, 249:10400 mobile) ---- */
/* The ring stream runs well past the hero's own bottom edge (137px
   at 1666), so overflow:hidden cut it off in a hard line against the
   #1c1c1c page below. Masks the hero's own bottom padding (96 to
   140px here, 56 on phones) to transparent instead, blending the
   rings and glow out smoothly. */
.pi-pfm-hero { position: relative; padding-bottom: 140px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); }
/* Same fix as just below, for the same reason - these
   were fixed px offsets from the hero's own corner, tuned for 1512,
   and drifted from the mock as soon as the stage next to them
   reflowed. Moved into .pi-pfm-hero__stage alongside the rings and
   expressed the same way: a center point plus a size, both in % of
   the stage's own box. */
.pi-pfm-hero__glow { position: absolute; aspect-ratio: 1; max-width: none; z-index: 0; pointer-events: none; transform: translate(-50%, -50%); }
/* This used to be positioned with fixed px offsets from
   .pi-pfm-hero's own top-left corner, tuned for the 1512 layout - as
   soon as the stage next to it moved (every narrower width reflows
   the copy/stage flex row), it stayed put and drifted away from the
   mock instead of rippling around it. Moved into .pi-pfm-hero__stage
   and expressed as a shared center point plus a size, both in % of
   the stage's own box, so it stays concentric on the mock and scales
   with it at every width with no breakpoint math.
   Sized and centered exactly like the old ring--3 (the largest
   Figma ring) - pi-rings.js draws the streaming rings inside it, R
   always half the SVG's own width. */
/* Measured against Figma 22:1084 at 1512 - all three layers sat
   right of their anchors (rings 52px, both glows 15px), consistent
   with having been measured with a scrollbar eating part of the
   viewport. left values below are each layer's own re-measured share
   of the 620px stage. */
.pi-pfm-hero__rings { position: absolute; left: 46.45%; top: 41.42%; width: 174.19%; aspect-ratio: 1; max-width: none; overflow: visible; z-index: 0; pointer-events: none; transform: translate(-50%, -50%); }
.pi-pfm-hero__glow--1 { left: 78.71%; top: -6.27%; width: 177.42%; }
.pi-pfm-hero__glow--2 { left: 85.16%; top: 59.13%; width: 112.90%; animation-delay: -4.5s; }

.pi-pfm-hero__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 176px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-pfm-hero__copy { display: flex; flex-direction: column; gap: 30px; width: 660px; max-width: 100%; }
.pi-pfm-hero__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-pfm-hero__headline { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: 64px; line-height: 72px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-pfm-hero__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-pfm-hero__lede { margin: 0; max-width: 68ch; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-subtitle); }
.pi-pfm-hero__buttons { display: flex; align-items: center; gap: 16px; }

.pi-pfm-hero__stage { position: relative; flex-shrink: 0; width: 620px; height: 734px; }
.pi-pfm-hero__stage-inner { position: relative; width: 100%; height: 100%; }
.pi-pfm-hero__stage .pi-ui-switchboard { position: absolute; left: 20px; top: 0; width: 460px; }
.pi-pfm-hero__stage .pi-ui-garage { position: absolute; left: 240px; top: 397px; width: 380px; }

/* 1024-1279.98px: the copy column has no min-width:0 and the buttons
   row doesn't wrap, so the fixed 620px stage was likely getting
   clipped by .pi-pfm-hero's overflow:hidden instead of the row
   reflowing. Shrink the stage's own box and scale its inner mocks to
   match. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-pfm-hero__content { gap: 24px; }
  .pi-pfm-hero__stage { width: 420px; height: 497px; }
  .pi-pfm-hero__stage-inner { transform: scale(0.677); transform-origin: top left; }
}

@media (max-width: 1023.98px) {
  /* The desktop 140px bottom padding doesn't shrink to the
     96px mobile section gap on its own below 1024px. */
  .pi-pfm-hero { padding-bottom: var(--pi-space-section-m); }
  .pi-pfm-hero__glow { --pi-glow-opacity: 0.6; opacity: var(--pi-glow-opacity); }
  .pi-pfm-hero__rings { opacity: 0.6; }
  .pi-pfm-hero__content { flex-direction: column; align-items: stretch; padding: 148px 20px 0; gap: 32px; }
  .pi-pfm-hero__copy { width: 100%; gap: 22px; }
  .pi-pfm-hero__headline { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }
  .pi-pfm-hero__lede { font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }
  .pi-pfm-hero__buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .pi-pfm-hero__buttons .pi-btn { width: 100%; }

  /* Both mocks sit in normal flow - no fixed stage height and no
     padding reserved for a pinned absolute card, so the hero's height
     comes from its content. The garage overlaps only the
     switchboard's last 32px via a negative margin (its own opaque
     background covers that strip), not an absolute position. */
  .pi-pfm-hero__stage { width: 100%; height: auto; }
  .pi-pfm-hero__stage-inner { height: auto; }
  .pi-pfm-hero__stage .pi-ui-switchboard { position: static; width: 100%; }
  .pi-pfm-hero__stage .pi-ui-switchboard__row--extra { display: none; }
  .pi-pfm-hero__stage .pi-ui-switchboard__more-row { display: flex; }
  .pi-pfm-hero__stage .pi-ui-garage { position: static; width: 100%; margin-top: -32px; }
}

/* Below 768 the stage's own percentage-of-620px-box positioning
   (desktop/tablet) no longer means anything, since the stage itself
   becomes width:100%/height:auto, stacked under the copy - the rings
   and both glows ended up wherever that math happened to land rather
   than anywhere close to the mobile Figma frame (249:10400).
   Positioned from the hero itself instead, at each layer's own mobile
   Figma center. .pi-pfm-hero__stage drops to position:static so these
   (still DOM-nested inside it) resolve against .pi-pfm-hero__content
   - the next positioned ancestor up - rather than the stage. */
@media (max-width: 767.98px) {
  .pi-pfm-hero { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
  .pi-pfm-hero__stage { position: static; }
  .pi-pfm-hero__rings { left: 50%; top: 480px; }
  .pi-pfm-hero__glow--1 { left: 50%; top: 130px; transform: translate(-50%, -50%); }
  .pi-pfm-hero__glow--2 { left: 50%; top: 610px; transform: translate(-50%, -50%); }
}

/* The wrap-instead-of-ellipsis override below was scoped to the
   same 1023.98px tier as everything else above, which also covered
   320 to 440 - there, the Shopping badge's own flex-shrink:0 width
   left too little room for the text column, so wrapping (instead of
   the base rule's ellipsis) broke "2019 Ram 2500" into one word per
   line rather than truncating it. Confined to 480-1023.98, where the
   card is wide enough that wrapping two lines still reads fine; below
   480 the sitewide ellipsis (pi-global.css) applies again. */
@media (min-width: 480px) and (max-width: 1023.98px) {
  /* The sitewide ellipsis (pi-global.css) truncated vehicle
     names here once the card dropped to this hero's mobile width -
     let them wrap instead, scoped to just this instance. */
  .pi-pfm-hero__stage .pi-ui-garage__vehicle-text strong,
  .pi-pfm-hero__stage .pi-ui-garage__vehicle-text em { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Below 480, wrapping only moved the one-
   word-per-line problem into an ellipsis one - the Shopping badge
   still shared the row with the text column, so the active row's name
   and engine line still had less width than every other row's and
   truncated hard (0px available at 320, "2..." at 360, "2019..." at
   390). Figma 249:10417 puts the badge on its own line under the
   engine line instead, so the text column gets the exact same width
   the other rows already have. Grid instead of flex so the badge's
   own row can share the text column's left edge (icon spans both
   rows) rather than starting back under the icon the way a wrapped
   flex row would. */
@media (max-width: 479.98px) {
  .pi-pfm-hero__stage .pi-ui-garage__vehicle.is-active {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    row-gap: 6px;
  }
  .pi-pfm-hero__stage .pi-ui-garage__vehicle.is-active .pi-ui-garage__vehicle-icon { grid-row: 1 / 3; }
  .pi-pfm-hero__stage .pi-ui-garage__vehicle.is-active .pi-ui-garage__vehicle-text { grid-column: 2; grid-row: 1; }
  .pi-pfm-hero__stage .pi-ui-garage__vehicle.is-active .pi-ui-garage__badge { grid-column: 2; grid-row: 2; justify-self: start; }
}
/* "Add a vehicle" needs 107px and only had
   91px from 360 to 414, running 16px into "Add by VIN" (with the Soon
   pill itself 10px past the card at 360) - the sitewide wrap
   threshold (pi-global.css) only caught this below 360. Platform's
   card is narrower than that threshold assumed, so it needs the same
   wrap through 439.98 instead. */
@media (max-width: 439.98px) {
  .pi-pfm-hero__stage .pi-ui-garage__add { flex-wrap: wrap; row-gap: 8px; }
}

/* Figma 249:10415 (Product Stage, true mobile, not this tablet
   tier) staggers the two cards instead of stacking them - switchboard
   89% wide and left-aligned, the garage card 77% wide, right-aligned
   and floating above the switchboard's lower rows (starting at 70% of
   its height), not butted underneath it. Lists every module too ("8
   of 9 on", no "+4 more" row) - the row cap above was specifically
   for the stacked 768-1023.98 layout the switchboard also uses; below
   768 the cards no longer stack, so there's no cramped space that cap
   was solving for. */
@media (max-width: 767.98px) {
  .pi-pfm-hero__stage-inner { position: relative; }
  .pi-pfm-hero__stage .pi-ui-switchboard { width: 89%; }
  .pi-pfm-hero__stage .pi-ui-switchboard__row--extra { display: flex; }
  .pi-pfm-hero__stage .pi-ui-switchboard__more-row { display: none; }
  /* The desktop rule's left: 240px (line 54) was
     never unset here, and with both left and right set, left wins -
     the card started at x 240 regardless of viewport width instead of
     sitting flush with the stage's right edge. */
  /* My Garage is absolutely positioned, so it never contributes to the
     stage's own (auto) height - at the stock top: 70% its own ~458px
     card ran roughly 210px past the switchboard's height, and since
     .pi-pfm-hero clips its own overflow, that much of the card's
     bottom was simply cut off. Moved the overlap higher (70% -> 52%)
     to shrink the amount that needs covering, and gave the stage a
     little reserved padding-bottom for the rest - a fixed value tied
     to this card's current content (vehicle count/line-wrapping would
     change its real height). */
  .pi-pfm-hero__stage { padding-bottom: 120px; }
  .pi-pfm-hero__stage .pi-ui-garage { position: absolute; left: auto; width: 77%; right: 0; top: 55%; margin-top: 0; z-index: 1; }
}

/* ---- Platform / Pillar Nav (22:1319 desktop, 249:10418 mobile) ----
   Docks just under .pi-nav and scroll-spies the
   active pillar (pi-motion.js). `top` is set inline by JS each scroll frame (it
   depends on .pi-nav's live, possibly-hidden height), the CSS value
   below is only the pre-JS/first-paint fallback. */
.pi-pillar-nav { position: sticky; top: 108px; z-index: 40; display: flex; justify-content: center; padding: 0 70px 20px; box-sizing: border-box; transition: top var(--pi-motion-base) var(--pi-ease-out); }
.pi-pillar-nav__bar { display: inline-flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.08); max-width: 100%; }
.pi-pillar-nav__tab { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.pi-pillar-nav__tab.is-active { background: var(--pi-grad-fyre); }
.pi-pillar-nav__label-desktop { font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-text-secondary); }
.pi-pillar-nav__tab.is-active .pi-pillar-nav__label-desktop { color: var(--pi-text-primary); }
.pi-pillar-nav__label-mobile { display: none; }

@media (max-width: 1023.98px) {
  .pi-pillar-nav { padding: 0 20px 20px; }
  .pi-pillar-nav__bar { width: 100%; justify-content: space-between; gap: 4px; padding: 6px; }
  .pi-pillar-nav__tab { flex: 1; justify-content: center; padding: 10px 8px; }
  .pi-pillar-nav__label-desktop { display: none; }
  .pi-pillar-nav__label-mobile { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pi-text-secondary); }
  .pi-pillar-nav__label-mobile em { font-style: normal; font-family: var(--pi-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--pi-text-muted); }
  .pi-pillar-nav__tab.is-active .pi-pillar-nav__label-mobile,
  .pi-pillar-nav__tab.is-active .pi-pillar-nav__label-mobile em { color: var(--pi-text-primary); }
}

/* ---- Platform / Pillar sections (shared pattern: visual card + copy) ---- */
.pi-pillar { display: flex; align-items: center; gap: 80px; padding-block: 120px 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; scroll-margin-top: 180px; }
.pi-pillar__visual--mobile { display: none; }
.pi-pillar__visual--desktop { position: relative; flex-shrink: 0; width: 640px; height: 674px; box-sizing: border-box; border-radius: 24px; border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(133.5deg, #1f1f1f, #0a0a0a); overflow: hidden; }
/* Wraps each pillar's own absolutely-positioned composition (glow +
   2-4 bespoke pieces per pillar) so the whole thing can scale as one
   unit in the 1024-1279.98px band below, instead of recalculating
   every child's left/top/width per pillar. */
.pi-pillar-visual-inner { position: relative; width: 100%; height: 100%; }
.pi-pillar__glow { position: absolute; left: 63px; top: -225px; width: 768px; height: 768px; max-width: none; z-index: 0; pointer-events: none; }
/* The shared .pi-ui-vehicle-selector component carries its own
   max-width:100%, meant for narrow contexts elsewhere - here it
   resolves against .pi-pillar-visual-inner's own unscaled 400px
   layout width (the scale(0.625) transform shrinks the paint, not the
   box percentages resolve against), clamping this to ~398px instead
   of the intended 560px and leaving it narrower than the matching
   .pi-ui-search-results-desktop (560px, no max-width of its own). */
.pi-pillar__visual--desktop .pi-ui-vehicle-selector { position: absolute; z-index: 1; left: 39px; top: 38px; width: 560px; max-width: none; }
.pi-pillar__visual--desktop .pi-ui-search-results { position: absolute; z-index: 1; left: 39px; top: 356px; }
/* #find-the-part is the one pillar whose selector mock carries
   the full By Vehicle/By Part#/By VIN loop - the extra tabs
   row and two extra panels that come with it (beyond what Figma's
   single static state shows) make this selector
   genuinely 356px tall, not Figma 23:1292's 287px. The results card
   below it was still positioned for that shorter, Figma-only height,
   so it overlapped the taller real selector by 38px. Shifting the
   results down by that same difference (plus Figma's own ~32px gap)
   and growing just this one pillar's card to match - scoped to
   #find-the-part so pillars 2-4, which don't carry this extra loop
   content, keep the shared 674px box - reserves its height in both
   card positions: the extra height this approved loop content needs
   is accounted for consistently, rather than fighting Figma's shorter
   number back into a box it no longer fits. */
/* Desktop only (1280px+) - the 1024-1279.98px tier below already
   scales this whole card (and every absolute position inside it,
   proportionally) down to a compact 400x421 box via transform:scale,
   which isn't part of what this fix addresses. */
@media (min-width: 1280px) {
  #find-the-part .pi-pillar__visual--desktop { height: 781px; }
  #find-the-part .pi-pillar__visual--desktop .pi-ui-search-results { top: 427px; }
}
/* Both cards tie at z-index 1, so DOM order (results after
   selector) always wins and the selector's own open dropdown gets
   painted over. Raise the selector only while a menu is actually
   open, so it never otherwise outranks the results card. */
.pi-pillar__visual--desktop .pi-ui-vehicle-selector.pi-ui-vehicle-selector--menu-open { z-index: 2; }

/* Find the part's ambient search/results loop (pi-motion.js).
   Scoped to #find-the-part specifically, not .pi-ui-search-results
   generally, since the same mock component also renders statically
   on Home's How It Works panel (deliberately static). */
/* Scoped to --desktop only, so the mobile visual's results list
   (buildFindThePart() already runs its same is-in toggling against
   that instance too - only this CSS was missing) never actually hid,
   showing fully populated results before the loop even started typing
   a query. Matching either visual variant instead of just desktop. */
#find-the-part .pi-ui-search-results__query,
#find-the-part .pi-ui-search-results__vehicle-chip,
#find-the-part .pi-ui-search-results__sidebar-row,
#find-the-part .pi-ui-search-results__cat,
#find-the-part .pi-ui-search-results__item {
  transition: opacity 260ms var(--pi-ease-out), transform 260ms var(--pi-ease-out);
}
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__vehicle-chip,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__sidebar-row,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__cat,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__item {
  opacity: 0;
  transform: translateX(8px);
}
/* This show rule was only 1 id + 2 classes, less
   specific than the hide rule above it (1 id + 3 classes, the extra
   .js-ready), so the hide rule always won regardless of .is-in and
   every element here stayed at opacity: 0 forever. Matching .js-ready
   here too makes the two rules' specificity equal, so source order
   (show rule comes second) decides, as intended. */
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__vehicle-chip.is-in,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__sidebar-row.is-in,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__cat.is-in,
#find-the-part .pi-ui-search-results.js-ready .pi-ui-search-results__item.is-in {
  opacity: 1;
  transform: none;
}

.pi-pillar__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.pi-pillar__eyebrow-row { display: flex; align-items: center; gap: 14px; }
.pi-pillar__number { font-family: var(--pi-font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-pillar__rule { width: 32px; height: 1px; background: var(--pi-grad-fyre); }
.pi-pillar__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pi-text-secondary); }
.pi-pillar__headline { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-pillar__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-pillar__lede { margin: 0; max-width: 68ch; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-secondary); }

.pi-pillar__modules { display: flex; flex-direction: column; width: 100%; }
/* Each row is also a link target from Home's module cards -
   clears both the fixed nav and the sticky pillar nav docked under it,
   same offset as .pi-pillar's own scroll-margin-top. */
.pi-pillar-module { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.08); scroll-margin-top: 180px; }
.pi-pillar-module__icon-tile { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--pi-accent-orange); background: linear-gradient(90deg, rgba(255,80,0,0.12), rgba(255,94,156,0.12)); }
.pi-pillar-module__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-pillar-module__title-row { display: flex; align-items: center; gap: 10px; }
.pi-pillar-module__title { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); white-space: nowrap; }
.pi-pillar-module__description { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }

@media (max-width: 1023.98px) {
  .pi-pillar { flex-direction: column; align-items: stretch; gap: 32px; padding: 64px 20px; }
  .pi-pillar__copy { order: -1; }
  .pi-pillar__visual--desktop { display: none; }
  .pi-pillar__visual--mobile { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .pi-pillar__visual--mobile .pi-ui-vehicle-selector,
  .pi-pillar__visual--mobile .pi-ui-search-results { width: 100%; }

  .pi-pillar__copy { gap: 24px; }
  .pi-pillar__headline { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-pillar__lede { font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }
  .pi-pillar-module__title { white-space: normal; }
}

/* ---- Platform / Fitment Setups (76:5400 desktop, 249:10472 mobile) ---- */
.pi-fitment-setups { display: flex; flex-direction: column; align-items: center; gap: 48px; padding-block: 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-fitment-setups__header { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pi-fitment-setups__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pi-accent-orange-text); }
.pi-fitment-setups__headline { margin: 0; width: 900px; max-width: 100%; font-family: var(--pi-font-body); font-weight: 400; font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-fitment-setups__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-fitment-setups__lede { margin: 0; width: 760px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-body); }

.pi-fitment-setups__carousel { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.pi-fitment-setups__dots { display: none; }
.pi-fitment-setups__grid { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; }

.pi-fitment-setups__footnote { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-muted); text-align: center; white-space: nowrap; }

@media (max-width: 1023.98px) {
  .pi-fitment-setups { align-items: stretch; gap: 32px; padding: 64px 20px; }
  .pi-fitment-setups__header { align-items: flex-start; text-align: left; gap: 16px; }
  .pi-fitment-setups__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-fitment-setups__lede { width: 100%; font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); }

  .pi-fitment-setups__grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-bottom: 4px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-fitment-setups__grid::-webkit-scrollbar { display: none; }
  .pi-fitment-setups__grid .pi-setup-card { flex: 0 0 300px; width: 300px; scroll-snap-align: start; padding: 24px; }
  .pi-fitment-setups__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
  .pi-fitment-setups__footnote { text-align: left; white-space: normal; }
}

/* .pi-setup-card has no min-width floor (unlike .pi-fm-card on
   Industries), so the 25% flex-basis shared with the other four-card
   rows squeezed hard at 1024-1279.98 - two-up here, four-up again at
   1280, same band as Home's Modules/Industries/Also-built-for rows. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-fitment-setups__grid .pi-setup-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
}

/* ---- Platform / Pillar 02, Confirm the fit (23:1470 desktop, 249:10488 mobile) ---- */
.pi-pillar2-visual { height: 813px; }
.pi-pillar2-checkpoint { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(15,13,13,0.85); border: 1px solid rgba(255,255,255,0.12); font-family: var(--pi-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: #F5F0ED; white-space: nowrap; }
.pi-pillar2-checkpoint__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pi-success); flex-shrink: 0; }
.pi-pillar2-checkpoint--product { left: 41px; top: 51px; }
.pi-pillar2-checkpoint--cart { left: 225px; top: 408px; }
.pi-pillar2-checkpoint--assistant { left: 27px; top: 454px; }
.pi-pillar2-visual__product { position: absolute; z-index: 1; left: 41px; top: 91px; }
.pi-pillar2-visual__cart { position: absolute; z-index: 1; left: 225px; top: 448px; }
.pi-pillar2-visual__assistant { position: absolute; z-index: 1; left: 27px; top: 494px; }
/* The dashes march (0.9s linear loop) while the arrowhead
   stays fixed - split from the original single pillar-connector-
   dashed.svg (whose dashes were baked in as static filled rects, not
   a stroke-dasharray, so they couldn't be animated as one image) into
   a CSS repeating-linear-gradient track (exact 5.667px pitch / 1.889px
   dash matching the original SVG's spacing) plus a small separate
   arrow SVG that doesn't move. */
.pi-pillar2-connector { position: absolute; z-index: 1; left: 469px; top: 368px; height: 68px; width: 12px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.pi-pillar2-connector__dashes {
  width: 2px;
  height: 58px;
  background-image: repeating-linear-gradient(to bottom, #FF5000 0, #FF5000 1.889px, transparent 1.889px, transparent 5.667px);
  background-size: 2px 5.667px;
  background-repeat: repeat-y;
  animation: pi-pillar2-dash-march 0.9s linear infinite;
}
@keyframes pi-pillar2-dash-march { to { background-position-y: 5.667px; } }
@media (prefers-reduced-motion: reduce) {
  .pi-pillar2-connector__dashes { animation: none; }
}
.pi-pillar2-connector__arrow { flex-shrink: 0; margin-top: -2px; }

/* Vertical stack replacing the old swipe slider - see the
   template comment. Each step is its own column (checkpoint pill
   above its mock); .pi-pillar2-connector--mobile reuses desktop's
   Product->Cart connector in normal flow instead of absolute
   positioning, and the plain sibling gap before the Assistant step
   (no connector feeding into it, same as desktop) is what keeps it
   reading as "any time" rather than a third linked step. */
.pi-pillar2-mobile-stack { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pi-pillar2-mobile-step { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 360px; }
.pi-pillar2-mobile-step + .pi-pillar2-mobile-step { margin-top: 32px; }
.pi-pillar2-connector--mobile { position: static; margin-block: 8px; }
.pi-pillar2-checkpoint--static { position: static; align-self: flex-start; }

@media (max-width: 1023.98px) {
  .pi-pillar2-visual { height: auto; }
}

/* ---- Platform / Pillar 03, Run the business (24:1510 desktop, 249:10547 mobile) ---- */
/* UI/Quick Order moved to pi-global.css: reused on the Industries B2B section. */
/* UI/Core Charge (light) */
.pi-ui-core-charge { width: 340px; max-width: 100%; box-sizing: border-box; padding: 19px; display: flex; flex-direction: column; gap: 12px; }
.pi-ui-core-charge__header { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-core-charge__title { display: flex; align-items: center; gap: 9px; }
.pi-ui-core-charge__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 14px; color: var(--pi-text-ui-dark); }
.pi-ui-core-charge__amount { font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-ui-dark-2); }
.pi-ui-core-charge__body { margin: 0; font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-ui-dark-2); }
.pi-ui-core-charge__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pi-border-ui-light); }
.pi-ui-core-charge__option.is-selected { background: var(--pi-bg-ui-light-2); border: 1.5px solid var(--pi-accent-orange); }
.pi-ui-core-charge__option-text { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.pi-ui-core-charge__option-text strong { font-family: var(--pi-font-ui); font-weight: 700; color: var(--pi-text-ui-dark); }
.pi-ui-core-charge__option-text em { font-style: normal; font-family: var(--pi-font-ui); color: var(--pi-text-ui-dark-2); }
.pi-ui-core-charge__due { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 8px; background: var(--pi-success-bg); font-family: var(--pi-font-ui); font-weight: 700; font-size: 11px; color: var(--pi-success-deep); }

/* Status toasts */
.pi-pillar3-toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: white; box-shadow: 0 20px 25px rgba(0,0,0,0.4); }
.pi-pillar3-toast__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: #FFF2EB; }
.pi-pillar3-toast__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pi-pillar3-toast__text strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); white-space: nowrap; }
.pi-pillar3-toast__text em { font-style: normal; font-family: var(--pi-font-ui); font-size: 11px; line-height: 15px; color: var(--pi-text-ui-dark-2); }
.pi-pillar3-toast__pill { display: inline-flex; align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: #E0F5EB; font-family: var(--pi-font-ui); font-weight: 600; font-size: 10px; color: #0F6E57; white-space: nowrap; }

.pi-pillar3-visual { height: 687px; }
.pi-pillar3-visual__quick-order { position: absolute; z-index: 1; left: 35px; top: 39px; width: 568px; }
.pi-pillar3-visual__core-charge { position: absolute; z-index: 1; left: 35px; top: 366px; width: 340px; }
.pi-pillar3-toast--warranty { position: absolute; z-index: 2; left: 387px; top: 406px; width: 216px; }
.pi-pillar3-toast--dropship { position: absolute; z-index: 2; left: 387px; top: 514px; width: 216px; }

@media (max-width: 1023.98px) {
  .pi-pillar3-toast--static { width: 100%; }
}

/* "Coming soon" module icon tile + tag (Pillar 04) */
.pi-pillar-module__icon-tile--soon { background: rgba(255,181,71,0.1); border: 1px solid rgba(255,181,71,0.4); }
.pi-pillar-module__soon { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,181,71,0.12); border: 1px solid rgba(255,181,71,0.45); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-warning); white-space: nowrap; }

/* ---- Platform / Pillar 04, Grow the relationship (24:1732 desktop, 249:10606 mobile) ---- */
/* UI/Garage Insights (light) */
.pi-ui-garage-insights { width: 492px; max-width: 100%; box-sizing: border-box; padding: 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 35px rgba(0,0,0,0.45); overflow: hidden; }
.pi-ui-garage-insights__header { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-garage-insights__title { display: flex; align-items: center; gap: 10px; }
.pi-ui-garage-insights__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 17px; color: var(--pi-text-ui-dark); }
.pi-ui-garage-insights__range { padding: 5px 10px; border-radius: 999px; background: #F5F2F0; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark-2); white-space: nowrap; }
.pi-ui-garage-insights__label-row { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-garage-insights__label-row p { margin: 0; font-family: var(--pi-font-ui); color: var(--pi-text-ui-dark-2); }
.pi-ui-garage-insights__label-row p:first-child { font-weight: 600; font-size: 10px; letter-spacing: 0.08em; }
.pi-ui-garage-insights__label-row p:last-child { font-size: 11px; }
.pi-ui-garage-insights__heatmap { display: flex; flex-direction: column; gap: 4px; }
.pi-ui-garage-insights__row { display: flex; align-items: center; gap: 4px; }
.pi-ui-garage-insights__row-name { flex: 0 0 110px; font-family: var(--pi-font-ui); font-weight: 600; font-size: 12px; color: var(--pi-text-ui-dark); }
.pi-ui-garage-insights__cell { position: relative; flex: 1; height: 40px; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: var(--pi-font-ui); font-weight: 600; font-size: 11px; color: var(--pi-text-ui-dark); }
/* A real border at only the hover/selected state grew the cell's
   box (nothing reserved the 2px at rest), shifting the number inside -
   an inset box-shadow draws the same outline without affecting layout. */
.pi-ui-garage-insights__cell.is-selected { box-shadow: inset 0 0 0 2px var(--pi-text-ui-dark); }
.pi-ui-garage-insights__tooltip { position: absolute; z-index: 3; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--pi-text-ui-dark); box-shadow: 0 6px 8px rgba(0,0,0,0.25); white-space: nowrap; font-weight: 400; }
.pi-ui-garage-insights__tooltip strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 12px; color: white; }
.pi-ui-garage-insights__tooltip em { font-style: normal; font-family: var(--pi-font-ui); font-size: 12px; color: #CCC; }
/* Left defaults to the tooltip's own center, but the JS always
   writes --pi-caret-left to the clamped cell-center offset once a
   tooltip exists, so the caret tracks the cell even when the box
   itself has been nudged to stay on screen. */
.pi-ui-garage-insights__tooltip::after { content: ''; position: absolute; top: 100%; left: var(--pi-caret-left, 50%); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--pi-text-ui-dark); }
.pi-ui-garage-insights__years { display: flex; align-items: center; gap: 4px; padding-top: 6px; }
.pi-ui-garage-insights__years-spacer { flex: 0 0 110px; }
.pi-ui-garage-insights__year { flex: 1; min-width: 0; text-align: center; font-family: var(--pi-font-ui); font-weight: 500; font-size: 10px; color: var(--pi-text-ui-dark-2); }
.pi-ui-garage-insights__compare { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #FFF2EB; }
/* var(--pi-accent-orange) on this #FFF2EB background only hits
   2.99:1 at 24px - #C2410C (4.72:1) passes. Scoped here, not on the
   shared variable (see pi-ui-product-page__compat for why). */
.pi-ui-garage-insights__compare strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 24px; color: #C2410C; }
.pi-ui-garage-insights__compare span { flex: 1; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark); }
.pi-ui-garage-insights__campaign { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; background: #F9F7F6; }
.pi-ui-garage-insights__campaign-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
/* Same truncation as .pi-ui-garage__vehicle-text - min-width:0
   lets this shrink, nowrap alone just overflows under the button next
   to it ("Owners of 2019 to 2021 F-250" under Build segment at 360/390). */
.pi-ui-garage-insights__campaign-text strong,
.pi-ui-garage-insights__campaign-text em { overflow: hidden; text-overflow: ellipsis; }
.pi-ui-garage-insights__campaign-text strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-garage-insights__campaign-text em { font-style: normal; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark-2); }
/* Decorative, not a real action - the heatmap beside it stays
   hoverable, so this is the one control neutralized on its own
   (tabindex="-1" is on the element itself, in garage-insights.php). */
.pi-ui-garage-insights__campaign-button { flex-shrink: 0; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--pi-text-ui-dark); font-family: var(--pi-font-ui); font-weight: 600; font-size: 12px; color: white; cursor: default; pointer-events: none; white-space: nowrap; }

/* Heatmap tour. Hovering any cell swaps the tooltip to it
   (pi-motion.js), reverting to the data peak on pointer-leave; a
   one-time staggered-by-column reveal plays the first time the card
   scrolls into view. */
.pi-ui-garage-insights.js-ready .pi-ui-garage-insights__cell { opacity: 0; transition: opacity 240ms var(--pi-ease-out); }
.pi-ui-garage-insights.js-ready .pi-ui-garage-insights__cell.is-in { opacity: 1; }
@media (hover: hover) {
  .pi-ui-garage-insights__cell { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-ui-garage-insights.js-ready .pi-ui-garage-insights__cell { transition: none; }
}

/* VIN lookup type-and-decode loop. */
.pi-ui-vin-lookup__field.is-typing { color: var(--pi-text-ui-dark); }
.pi-ui-vin-lookup.js-ready .pi-ui-vin-lookup__result { opacity: 0; transform: translateY(4px); transition: opacity 240ms var(--pi-ease-out), transform 240ms var(--pi-ease-out); }
.pi-ui-vin-lookup.js-ready .pi-ui-vin-lookup__result.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pi-ui-vin-lookup.js-ready .pi-ui-vin-lookup__result { transition: none; }
}

/* UI/VIN Lookup (light) */
.pi-ui-vin-lookup { width: 400px; max-width: 100%; box-sizing: border-box; padding: 21px; display: flex; flex-direction: column; gap: 12px; }
.pi-ui-vin-lookup__header { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-vin-lookup__title { display: flex; align-items: center; gap: 9px; }
.pi-ui-vin-lookup__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 15px; color: var(--pi-text-ui-dark); }
.pi-ui-vin-lookup__input { display: flex; align-items: stretch; gap: 11px; }
/* Nowrap so the typed VIN (now left visible through the
   whole result hold, not cleared the instant it appears) can't wrap
   the field to a second line at narrow widths - matches the other
   vin-lookup text elements, which are already nowrap. */
.pi-ui-vin-lookup__field { flex: 1; min-width: 0; display: flex; align-items: center; padding: 11px 12px; border: 1.5px solid var(--pi-accent-orange); border-radius: 8px; font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-ui-dark-2); white-space: nowrap; }
.pi-ui-vin-lookup__submit { flex-shrink: 0; min-width: 120px; text-align: center; padding: 11px 18px; border: 0; border-radius: 8px; background: var(--pi-text-ui-dark); font-family: var(--pi-font-ui); font-weight: 700; font-size: 11px; color: white; cursor: pointer; white-space: nowrap; }
.pi-ui-vin-lookup__help { margin: 0; font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-ui-dark-2); }
.pi-ui-vin-lookup__result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--pi-success-bg); }
.pi-ui-vin-lookup__result-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.pi-ui-vin-lookup__result-text { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; color: var(--pi-success-deep); }
.pi-ui-vin-lookup__result-text strong { font-family: var(--pi-font-ui); font-weight: 700; font-size: 11px; }
.pi-ui-vin-lookup__result-text em { font-style: normal; font-family: var(--pi-font-ui); font-size: 10px; }
.pi-ui-vin-lookup__result-link { flex-shrink: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; color: var(--pi-text-ui-dark-2); text-decoration: underline; white-space: nowrap; }

.pi-pillar4-visual { height: 789px; }
.pi-pillar4-visual__insights { position: absolute; z-index: 1; left: 31px; top: 35px; width: 492px; }
.pi-pillar4-visual__vin { position: absolute; z-index: 2; left: 207px; top: 526px; width: 400px; }
@media (max-width: 1023.98px) {
  .pi-pillar4-visual-mobile { gap: 20px; }

  /* The tooltip is pinned to the heatmap's 4th-of-6 column (right
     half), and centered with no width cap, so it ran past the card's
     (and then the viewport's) right edge, widening the whole page.
     Flip it to grow from the cell's right edge instead of centering,
     and cap its width to what's actually left in the viewport (section
     padding 20px + card padding 22px on each side = 84px). */
  .pi-ui-garage-insights__tooltip {
    left: auto;
    right: -49px;
    transform: none;
    max-width: calc(100vw - 88px);
  }
  /* The caret used to have its own fixed right:16px here,
     independent of where the box actually ended up. The JS now always
     writes --pi-caret-left to the clamped cell-center offset, so the
     shared base rule (left: var(--pi-caret-left, 50%)) already points
     it correctly at every tier - nothing mobile-specific to override. */
}

/* The ellipsis keeps the campaign row from overflowing
   under its button, but below 430 the fixed-width button leaves only
   about 97px for the text, so "Owners of 2019 to 2021 F-250 6.7L..."
   and "821 customers · only parts tha..." truncate hard enough to lose
   the content. Wrap instead of truncating at this width - the row
   already centers its icon/button against the text column's height. */
@media (max-width: 430px) {
  .pi-ui-garage-insights__campaign-text strong,
  .pi-ui-garage-insights__campaign-text em { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* The 1024-1279.98px shrink below used to live right
   after the shared .pi-pillar__visual--desktop rule (before pillar2/3/4's
   own unconditional height overrides later in this file), so its
   height:421px lost the cascade to .pi-pillar2-visual{height:813px} /
   pillar3's 687px / pillar4's 789px (equal specificity, later source
   wins) - the frame stayed full desktop height while only 400px wide.
   Moved after all three so it wins, and widened to explicitly re-state
   the override for all three pillar-specific classes. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-pillar { gap: 48px; }
  .pi-pillar__visual--desktop,
  .pi-pillar2-visual,
  .pi-pillar3-visual,
  .pi-pillar4-visual { width: 400px; height: 421px; }
  .pi-pillar-visual-inner { transform: scale(0.625); transform-origin: top left; }
  .pi-pillar-module__title { white-space: normal; }
  /* The 1280px+ fix above (781px tall, results at top: 427px)
     was scoped to desktop only, so this tier's uniform 421px/400x421
     box still used the shorter Figma-only height for find-the-part's
     taller real selector - the results card still covered the Shop
     button by about 10px. 488 is 781 scaled by this tier's own 0.625
     (same ratio every pillar here is already scaled by); the results
     card's own top stays the unscaled 427px, since it scales with the
     rest of .pi-pillar-visual-inner's content, not on its own. */
  #find-the-part .pi-pillar__visual--desktop { height: 488px; }
  #find-the-part .pi-pillar__visual--desktop .pi-ui-search-results { top: 427px; }
  /* Same shape of bug as just above - the uniform 421px
     box (its own 813px/789px unscaled heights x this tier's 0.625)
     cut off the cart's note and Checkout button plus the assistant on
     Confirm the Fit, and the VIN lookup result on Grow the
     Relationship. 508 and 493 are each pillar's own real height
     scaled by the same 0.625 every pillar here already uses. */
  #confirm-the-fit .pi-pillar__visual--desktop { height: 508px; }
  #grow-the-relationship .pi-pillar__visual--desktop { height: 493px; }
}

/* ---- Platform / Comparison (25:1784 desktop, 249:10651 mobile) ---- */
.pi-comparison { display: flex; flex-direction: column; align-items: center; gap: 56px; padding-block: 120px; padding-inline: var(--pi-content-pad); box-sizing: border-box; background: var(--pi-bg-surface); }
.pi-comparison__header { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pi-comparison__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-comparison__headline { margin: 0; width: 800px; max-width: 100%; font-family: var(--pi-font-body); font-weight: 400; font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-comparison__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-comparison__lede { margin: 0; width: 700px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-secondary); }

.pi-comparison__table { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 1180px; box-sizing: border-box; border-radius: 20px; background: var(--pi-bg-page); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.pi-comparison__head, .pi-comparison__row { display: flex; align-items: stretch; }
.pi-comparison__row { border-top: 1px solid rgba(255,255,255,0.07); }
.pi-comparison__cell { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 16px 28px; box-sizing: border-box; }
.pi-comparison__cell--capability { width: 44.07%; font-family: var(--pi-font-body); font-size: 18px; line-height: 30px; color: var(--pi-text-primary); }
.pi-comparison__cell--pi { width: 27.97%; background: linear-gradient(to right, rgba(255,80,0,0.06), rgba(255,94,156,0.06)); font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-subtitle); }
.pi-comparison__cell--pi-head { background: linear-gradient(to right, rgba(255,80,0,0.14), rgba(255,94,156,0.14)); }
.pi-comparison__head .pi-comparison__cell--capability,
.pi-comparison__head .pi-comparison__cell--competitor { font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-text-body); }
.pi-comparison__head .pi-comparison__cell--pi-head { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(to right, rgba(255,80,0,0.14), rgba(255,94,156,0.14)), linear-gradient(to right, #ff5000, #ff5e9c); background-clip: padding-box, text; -webkit-background-clip: padding-box, text; color: transparent; }
.pi-comparison__cell--competitor { width: 27.97%; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }

.pi-comparison__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; box-sizing: border-box; }
.pi-comparison__icon--check { background: var(--pi-grad-fyre); }
.pi-comparison__icon--minus { background: var(--pi-bg-raised-2); }

.pi-comparison__mobile-card { display: none; }

@media (max-width: 1023.98px) {
  .pi-comparison { align-items: stretch; gap: 32px; padding: 64px 20px; }
  .pi-comparison__header { align-items: flex-start; text-align: left; gap: 16px; }
  .pi-comparison__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-comparison__lede { width: 100%; font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); color: var(--pi-text-body); }

  .pi-comparison__table { display: none; }

  .pi-comparison__mobile-card { display: flex; flex-direction: column; border-radius: 20px; background: var(--pi-bg-page); border: 1px solid rgba(255,255,255,0.08); padding: 20px; box-sizing: border-box; }
  /* The key used to be two lines shaped exactly like the rows
     below them (a bold check line, a muted minus line) - easy to
     mistake for the first comparison row rather than a legend. Two
     chips side by side read as a key; the Parts Intelligence chip
     reuses desktop's own header tint and gradient-text treatment
     (.pi-comparison__cell--pi-head) so the two breakpoints still
     match. */
  .pi-comparison__mobile-legend { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .pi-comparison__mobile-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; font-family: var(--pi-font-body); font-size: 13px; }
  .pi-comparison__mobile-chip .pi-comparison__icon { width: 18px; height: 18px; }
  .pi-comparison__mobile-chip--pi { background: linear-gradient(to right, rgba(255,80,0,0.14), rgba(255,94,156,0.14)); }
  .pi-comparison__mobile-chip-label { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pi-comparison__mobile-chip--competitor { background: var(--pi-bg-raised-2); color: var(--pi-text-body); }

  /* Each row used to fold the capability text into the PI
     line (check icon + capability, as if the capability itself were
     Parts Intelligence's answer) - that's two lines standing in for
     desktop's three distinct cells. A plain capability heading now
     sits above its own Included/competitor lines, same three pieces
     of information desktop keeps apart. */
  .pi-comparison__mobile-row { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; row-gap: 10px; }
  .pi-comparison__mobile-row:last-child { padding-bottom: 0; }
  .pi-comparison__mobile-capability { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--pi-text-primary); }
  /* A nested 10px gap was doing double duty as both the icon/
     label column gap and the line/line row gap, so the two icons ended
     up with only a couple of px between them instead of the row's
     intended 10px. A two-column grid keeps the column and row gaps
     independent. align-items:start + the icon's own margin-top formula
     centers the icon on the label's first line whether the label is
     one line or wraps to two - for a single line it resolves to the
     same offset flat centering would give, so there's no need to
     special-case either case. */
  .pi-comparison__mobile-line { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; font-family: var(--pi-font-body); font-size: 15px; line-height: 1.4; color: var(--pi-text-primary); }
  .pi-comparison__mobile-line--sub { font-size: 13px; color: var(--pi-text-body); }
  .pi-comparison__mobile-line .pi-comparison__icon { margin-top: calc((1lh - 28px) / 2); }
}

/* ---- Platform / Launch Process (25:1888 desktop, 249:10741 mobile) ---- */
.pi-launch { display: flex; flex-direction: column; gap: 64px; padding-block: 100px 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-launch__header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.pi-launch__header { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pi-launch__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-launch__headline { margin: 0; width: 760px; max-width: 100%; font-family: var(--pi-font-body); font-weight: 400; font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-launch__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-launch__lede { margin: 0; width: 640px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-secondary); }

.pi-launch__time { flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 22px 28px; border-radius: 16px; background: var(--pi-bg-surface); border: 1px solid var(--pi-accent-orange); box-sizing: border-box; }
.pi-launch__time-text { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.pi-launch__time-text strong { font-family: var(--pi-font-body); font-weight: 700; font-size: 24px; letter-spacing: -0.005em; color: var(--pi-text-primary); }
.pi-launch__time-text span { font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-body); white-space: normal; }

.pi-launch__timeline { position: relative; display: flex; gap: 18px; width: 100%; }
.pi-launch__timeline::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: rgba(255,255,255,0.12); z-index: 0; }
/* Default to fully drawn/lit (matches the original static design) so
   a no-JS or reduced-motion visitor always sees the finished state;
   .js-ready (added once pi-motion.js takes over, and only without
   prefers-reduced-motion) switches to the scroll-linked version. */
/* Matches .pi-launch__timeline::before's own left:24px/right:24px
   inset (48px shorter than the timeline's box) - width:100% here
   used the full box instead, so the fallback/fully-lit state ran the
   gradient 24-48px past where the grey track actually ends. */
.pi-launch__progress { position: absolute; left: 24px; top: 24px; height: 1px; width: calc(100% - 48px); background: linear-gradient(to right, rgba(255,80,0,0.9), rgba(255,94,156,0.9)); z-index: 0; }
.pi-launch__timeline.js-ready .pi-launch__progress { width: 0%; transition: width 100ms linear; }
.pi-launch__step { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pi-launch__step-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; box-sizing: border-box; background: var(--pi-bg-page); border: 1.5px solid var(--pi-accent-orange); transition: border-color var(--pi-motion-base) var(--pi-ease-out); }
.pi-launch__step-tile span { transition: opacity var(--pi-motion-base) var(--pi-ease-out); }
.pi-launch__timeline.js-ready .pi-launch__step:not(.is-lit) .pi-launch__step-tile { border-color: rgba(255,255,255,0.16); }
.pi-launch__timeline.js-ready .pi-launch__step:not(.is-lit) .pi-launch__step-tile span { opacity: 0.5; }
.pi-launch__step-tile span { font-family: var(--pi-font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-launch__step-title { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); }
.pi-launch__step-description { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }
.pi-launch__dots { display: none; }

/* .pi-launch__header has no width of its own (same bug as
   .pi-problem__header's), so its 760px headline/640px lede force it
   wide regardless of available space, and .pi-launch__time's
   flex-shrink:0 plus nowrap text never yields - together they push
   the "7 to 16 weeks" card past the viewport below 1440px. */
@media (min-width: 1024px) and (max-width: 1499.98px) {
  .pi-launch__header-row { gap: 24px; }
  .pi-launch__header { width: 100%; flex: 1 1 0; min-width: 0; }
  .pi-launch__time-text { white-space: normal; }
}
/* Media queries are evaluated against the viewport, which on
   Windows includes a classic (non-overlay) scrollbar - at 1440 with
   its usual 15px the page is really 1425px wide, 14px narrower than
   this fix's own old 1439.98px cutoff, so .pi-launch__time went back
   to flex-shrink:0 right where it needed to shrink most. No upper
   bound on these two: shrinking a card that already fits is a no-op,
   so there's no real-browser-width window left for a scrollbar to
   expose. */
@media (min-width: 1024px) {
  .pi-launch__time { flex-shrink: 1; min-width: 0; }
  .pi-launch__header { min-width: 0; }
}

@media (max-width: 1023.98px) {
  .pi-launch { gap: 32px; padding: 64px 20px; }
  .pi-launch__header-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .pi-launch__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-launch__lede { width: 100%; font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); color: var(--pi-text-body); }
  .pi-launch__time { width: 100%; box-sizing: border-box; }

  .pi-launch__timeline { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-launch__timeline::-webkit-scrollbar { display: none; }
  .pi-launch__timeline::before { left: 24px; right: auto; width: 2000px; }
  /* Steps are only 260px wide, narrower than a typical swipe's
     travel distance, so without scroll-snap-stop a single fast swipe's
     momentum could carry mandatory snap past the very next step and
     land two or more steps ahead, skipping that step's dot entirely. */
  .pi-launch__step { flex: 0 0 260px; width: 260px; scroll-snap-align: start; scroll-snap-stop: always; }
  .pi-launch__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
}

/* ---- Tablet: see pi-home.css for the full explanation. Must
   come after every max-width:1023.98px block above.
   .pi-launch__timeline is deliberately left as a swipe carousel here:
   it's a single connected process line (an absolutely-positioned
   connector spans all steps edge to edge), not a card grid, and
   wrapping it to two rows would break the connector with no Figma
   tablet frame to show the intended fix - left for a design decision
   rather than guessed at. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pi-pfm-hero__content { padding: 148px 40px 0; }
  .pi-pillar-nav { padding: 0 40px 20px; }
  .pi-pillar { padding: 64px 40px; }
  .pi-fitment-setups { padding: 64px 40px; }
  .pi-comparison { padding: 64px 40px; }
  .pi-launch { padding: 64px 40px; }

  .pi-pfm-hero__buttons { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; }
  .pi-pfm-hero__buttons .pi-btn { width: auto; }

  .pi-fitment-setups__grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .pi-fitment-setups__grid .pi-setup-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-fitment-setups__dots { display: none; }

  /* The phone layout's width:100% switchboard was never given a
     cap, so at tablet widths it stretches with the viewport (~670px at
     768) instead of staying at the mobile-composition's own size -
     the My Garage card then covers the module list across its full
     width instead of overlapping just its bottom-right corner. */
  .pi-pfm-hero__stage { max-width: 420px; margin: 0 auto; }
}