/**
 * Parts Intelligence: Home page
 * Figma: Hero 52:4369 (desktop) / 247:10398 (mobile), UI/Fitment Search 74:5528 / 245:9967
 */

/* ---- Hero ---- */
.pi-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--pi-bg-page);
}
.pi-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* CSS fallback: shown until the canvas paints its first frame, and
     permanently in place of it when WebGL is unavailable. Approximates
     PI Silk's base/colorA/colorB/colorC. */
  background:
    radial-gradient(ellipse 70% 60% at 18% 65%, rgba(255,80,0,0.4), transparent 60%),
    radial-gradient(ellipse 60% 55% at 78% 15%, rgba(255,94,156,0.32), transparent 60%),
    radial-gradient(ellipse 65% 60% at 62% 95%, rgba(224,23,101,0.35), transparent 60%),
    var(--pi-shader-base);
}
.pi-hero__shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.pi-hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  height: 200px;
  background: linear-gradient(to bottom, rgba(28,28,28,0), var(--pi-bg-page));
}
/* The gradient "Sold." word measured below the 3:1 contrast
   floor for large text against the Aurora buffer (worst case 1.87:1 at
   1512). This scrim sits between the canvas and the text, centered
   on the headline band, without touching the brand gradient itself. */
.pi-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(18,18,18,.55), transparent 60%);
}
.pi-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1512px;
  box-sizing: border-box;
  padding: 152px 70px 96px;
  text-align: center;
}

.pi-tag {
  display: inline-flex;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F4612B, #FF0465);
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-tag-size);
  line-height: var(--pi-label-tag-line);
  letter-spacing: var(--pi-label-tag-tracking);
  text-transform: uppercase;
  color: var(--pi-text-primary);
  white-space: nowrap;
}

.pi-hero__headline {
  margin: 0;
  font-family: var(--pi-font-display);
  font-weight: 400;
  font-size: 112px;
  line-height: 1;
  letter-spacing: -3.36px;
  color: var(--pi-text-primary);
  max-width: 1200px;
}
.pi-hero__headline-highlight {
  font-weight: 700;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.pi-hero__lede {
  margin: 0;
  font-family: var(--pi-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--pi-text-subtitle);
  max-width: 760px;
}

.pi-hero__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}
/* Below 1024px this button skips the inline lightbox (in
   pi-motion.js) and navigates straight to YouTube, so Figma gives it
   an external-link arrow there instead of the inline-watch arrow. */
.pi-hero__webinar-icon--mobile { display: none; }

/* ---- UI/Fitment Search ---- */
.pi-fitment-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px; /* the Figma "Spacer" */
  width: 100%;
}

.pi-fitment-search__row--desktop {
  display: flex;
  gap: 14px;
  align-items: center;
}
.pi-fitment-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15,13,13,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pi-fitment-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-tag-size);
  line-height: var(--pi-label-tag-line);
  letter-spacing: var(--pi-label-tag-tracking);
  text-transform: uppercase;
  color: var(--pi-text-secondary);
  white-space: nowrap;
}
.pi-fitment-tab.is-active {
  background: rgba(255,255,255,0.12);
  color: var(--pi-text-primary);
}
/* Was a muted + an orange raster source per tab, crossfaded
   by .is-active - Car & Truck's own "muted" source was a different
   gray and 18px size than Powersports/Marine's (8F8F8F at 20px), so
   the three never matched. One inline SVG per tab now, stroked with
   currentColor, with color itself (not a second source) driven by
   state - unselected inherits the tab label's own color, active gets
   the accent orange directly, and the color transition replaces the
   old opacity crossfade. */
.pi-fitment-tab__icon { position: relative; flex-shrink: 0; display: inline-flex; width: 20px; height: 20px; color: var(--pi-text-secondary); transition: color var(--pi-motion-fast) var(--pi-ease-out); }
.pi-fitment-tab__icon svg { display: block; width: 100%; height: 100%; }
.pi-fitment-tab.is-active .pi-fitment-tab__icon { color: var(--pi-accent-orange); }
.pi-fitment-search__more {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-meta-size);
  line-height: var(--pi-label-meta-line);
  letter-spacing: var(--pi-label-meta-tracking);
  text-transform: uppercase;
  color: var(--pi-text-subtitle);
  white-space: nowrap;
}

.pi-fitment-pill--desktop {
  position: relative;
  /* Its own dropdown menu (z-index: 6) only outranks a sibling
     by escaping to compete at this level - .pi-fitment-card--mobile's
     filter: drop-shadow traps its copy of the same menu inside a
     local stacking context instead, where it can't escape, so without
     this the mobile dropdown lost a DOM-order tie against
     .pi-fitment-result-wrap (a later, same z-index:auto flex sibling)
     and rendered underneath the fitment badge/count. Giving both pill
     containers their own explicit z-index here makes the whole
     container - dropdown included either way - consistently outrank
     the result row regardless of that trap. */
  z-index: 1;
  display: flex;
  align-items: center;
  /* Was 28px on the left only, to leave room for the first
     segment's own padding:0 22px 0 0 override - now every segment
     carries the same 20px left padding itself, so the pill's own
     padding drops to a uniform 8px and the Year label's rendered left
     edge lands exactly where it did before (8 + 20 = 28). */
  padding: 8px;
  border-radius: 999px;
  background: rgba(20,18,18,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  filter: drop-shadow(0px 20px 30px rgba(255,79,0,0.25));
}
.pi-fitment-pill__segment {
  position: relative;
  display: flex;
  align-items: center;
  /* Fills the pill's full 52px inner row height on every segment
     (previously only as tall as the text), so hover/open/focus states
     show real space around the label instead of hugging it. */
  height: 52px;
  box-sizing: border-box;
  padding: 0 36px 0 20px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  border-radius: 999px;
  transition: background-color var(--pi-motion-fast) var(--pi-ease-out);
}
/* The segment's own background filled it edge to edge, so the
   hover/open tint ran straight into the 1px dividers on both sides
   with zero gap. Moving the fill to an inset pseudo-element instead of
   the segment's own background leaves a margin on every side; 20px
   (half the 40px inset height) keeps it a true stadium shape rather
   than a rounded rect, so the first and last segments' fill continues
   the outer pill's own fully-rounded cap instead of showing a
   smaller-radius corner inside a bigger one. */
.pi-fitment-pill__segment::before {
  content: '';
  position: absolute;
  inset: 6px 4px;
  border-radius: 20px;
  background: transparent;
  transition: background-color var(--pi-motion-fast) var(--pi-ease-out);
}
/* The chevron used to sit in flow after a flex gap; absolute-positioning
   it at a fixed offset keeps every segment's icon aligned regardless of
   how wide its own value text is, and frees padding to do the hover/
   open fill's spacing instead of a gap. */
.pi-fitment-pill__segment img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.pi-fitment-pill__segment:disabled { cursor: default; opacity: 0.45; }
.pi-fitment-pill__segment[aria-expanded="true"]::before { background: rgba(255,255,255,0.08); }
@media (hover: hover) {
  .pi-fitment-pill__segment:not(:disabled):hover::before { background: rgba(255,255,255,0.05); }
}
.pi-fitment-pill__segment:focus-visible { outline: 2px solid #FF5000; outline-offset: 2px; }
.pi-fitment-pill__segment.is-flash .pi-fitment-pill__value { animation: pi-fitment-flash 700ms var(--pi-ease-out); }
@keyframes pi-fitment-flash { from { color: var(--pi-accent-orange-text); } }
.pi-fitment-pill__divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.pi-fitment-pill__text {
  /* position:relative (static content otherwise paints below a
     positioned ::before sibling, even an earlier one) keeps the label
     text above the segment's new inset fill layer. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pi-fitment-pill__label {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-meta-size);
  letter-spacing: var(--pi-label-meta-tracking);
  line-height: 16px;
  color: var(--pi-text-muted);
}
.pi-fitment-pill__value {
  font-family: var(--pi-font-body);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: var(--pi-label-nav-tracking);
  line-height: 16px;
  color: var(--pi-text-primary);
}

.pi-fitment-tabs--mobile,
.pi-fitment-card--mobile {
  display: none;
}

/* Animates the result row's space open instead of the old
   hidden/display:none snap, which jumped the hero's height (and
   everything below it) by 52px at 1280+ and 82px on phones, in a
   single frame. grid-template-rows: 0fr -> 1fr grows the row itself;
   margin-top -16px -> 0 opens the parent .pi-fitment-search flex
   gap at the same time, since that 16px gap always applies once this
   wrapper is a permanent (never display:none) flex child.
   --pi-motion-base (260ms), not -slow (600ms) - this is the one thing
   standing between a click and the count-up actually starting, so it
   should feel immediate; pi-motion.js mirrors this duration to know
   when to start the count and the rise-in. */
.pi-fitment-result-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -16px;
  transition: grid-template-rows var(--pi-motion-base) var(--pi-ease-out), margin-top var(--pi-motion-base) var(--pi-ease-out);
}
.pi-fitment-result-wrap.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pi-fitment-result-wrap { transition: none; }
}
.pi-fitment-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.pi-fitment-result__count {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-meta-size);
  line-height: var(--pi-label-meta-line);
  letter-spacing: var(--pi-label-meta-tracking);
  text-transform: uppercase;
  color: var(--pi-text-secondary);
  white-space: nowrap;
}
/* Proportional digits change width as the count ticks (1 is
   narrower than 8), shifting "parts fit this vehicle" sideways for the
   whole 800ms count. Tabular digits plus a right-aligned, min-width
   box (set in ch by pi-motion.js, sized to this run's own final
   string) keeps the box - and everything after it - still. */
.pi-fitment-result__count-number { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
/* Without this, the badge and count have no hidden resting state, so
   they're already fully visible (just clipped by the still-growing,
   overflow:hidden row) for the whole 600ms the space takes to open -
   then .is-in's animation plays its "from" keyframe and visibly resets
   them to invisible before fading back in, reading as the content
   loading twice. Keeping them hidden until .is-in actually applies
   means the only thing happening during the open is an empty box
   growing, and the one rise-in plays once the space is ready for it. */
.pi-fitment-result:not(.is-in) > * { opacity: 0; transform: translateY(12px); }
.pi-fitment-result.is-in > * { animation: pi-fitment-rise var(--pi-motion-slow) var(--pi-ease-out) both; }
.pi-fitment-result.is-in > *:nth-child(2) { animation-delay: 80ms; }
@keyframes pi-fitment-rise { from { opacity: 0; transform: translateY(12px); } }

/* Fitment search popover menu: the fitment search's dropdowns are a
   white panel like any native UI control, independent of the dark
   hero behind them (PI Motion Demo). */
.pi-fitment-menu {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 6;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--pi-bg-ui-light);
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.6);
  display: grid;
  gap: 2px;
  font-family: var(--pi-font-ui);
  scrollbar-width: none;
}
.pi-fitment-menu::-webkit-scrollbar { display: none; }
.pi-fitment-menu__opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--pi-font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--pi-text-ui-dark);
  cursor: pointer;
}
.pi-fitment-menu__opt:focus-visible {
  background: var(--pi-bg-ui-light-2);
}
@media (hover: hover) {
  .pi-fitment-menu__opt:hover {
    background: var(--pi-bg-ui-light-2);
  }
}
.pi-fitment-menu__opt[aria-selected="true"] {
  background: rgba(255,80,0,0.1);
  color: var(--pi-accent-orange-text);
  font-weight: 600;
}
.pi-fitment-submit .pi-fitment-spin {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  animation: pi-fitment-spin 0.7s linear infinite;
}
@keyframes pi-fitment-spin { to { transform: rotate(360deg); } }
.pi-fitment-submit.is-ready { animation: pi-fitment-ready 900ms var(--pi-ease-out); }
@keyframes pi-fitment-ready { 40% { box-shadow: 0 0 0 8px rgba(255,94,156,0.25); } }
/* The "Finding parts" state already shows for 0ms under reduced
   motion (pi-motion.js skips its own delay there), but stop the spin
   outright rather than rely on the window being too brief to notice. */
@media (prefers-reduced-motion: reduce) {
  .pi-fitment-submit .pi-fitment-spin { animation: none; }
}

/* ---- Logo Wall (16:274 desktop, 247:10412 mobile) ---- */
/* ---- Problem (17:239 desktop, 247:10420 mobile) ---- */
.pi-problem {
  display: flex;
  align-items: center;
  gap: 90px;
  padding: 70px;
  max-width: 1512px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--pi-bg-page);
}
.pi-problem__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  flex-shrink: 0;
}
.pi-problem__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.pi-problem__eyebrow {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-eyebrow-size);
  line-height: var(--pi-label-eyebrow-line);
  letter-spacing: var(--pi-label-eyebrow-tracking);
  text-transform: uppercase;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.pi-problem__headline {
  margin: 0;
  width: 560px;
  max-width: 100%;
  font-family: var(--pi-font-display);
  font-weight: 400;
  font-size: var(--pi-h2-size);
  line-height: var(--pi-h2-line);
  letter-spacing: -2%;
  color: var(--pi-text-primary);
}
.pi-problem__headline-highlight {
  font-weight: 700;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.pi-problem__lede {
  margin: 0;
  width: 540px;
  max-width: 100%;
  font-family: var(--pi-font-body);
  font-weight: 400;
  font-size: var(--pi-body-lrg-size);
  line-height: var(--pi-body-lrg-line);
  color: var(--pi-text-secondary);
}
.pi-problem__callout {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.pi-problem__callout-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--pi-grad-fyre);
  flex-shrink: 0;
}
.pi-problem__callout-text {
  margin: 0;
  width: 560px;
  max-width: 100%;
  font-family: var(--pi-font-display);
  font-weight: 300;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--pi-text-subtitle);
}
.pi-problem__callout-text strong {
  font-weight: 700;
  color: var(--pi-text-primary);
}

.pi-problem__pains {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
}
.pi-pain-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--pi-bg-surface);
  border: 1px solid rgba(255,255,255,0.06);
}
.pi-pain-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pi-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pi-error) 35%, transparent);
}
.pi-pain-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 0 0;
  min-width: 0;
}
.pi-pain-card__title {
  margin: 0;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-card-title-size);
  line-height: var(--pi-card-title-line);
  color: var(--pi-text-primary);
}
.pi-pain-card__description {
  margin: 0;
  font-family: var(--pi-font-body);
  font-weight: 400;
  font-size: var(--pi-body-sml-size);
  line-height: var(--pi-body-sml-line);
  color: var(--pi-text-body);
}

/* 1024-1279.98px: .pi-problem__copy's flex-shrink:0 plus its 560px
   headline/callout-text left .pi-problem__pains only ~150-230px at
   1024px, wrapping pain-card copy one word per line. Let copy flex
   down too (its children already have max-width:100% and shrink
   with it) and tighten the row gap. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-problem { gap: 48px; }
  .pi-problem__copy { flex: 1.3 1 0; min-width: 0; }
  /* .pi-problem__header has no width of its own, so as a flex item
     with align-items:flex-start it was sizing to fit its 560px
     headline rather than respecting copy's narrower resolved width -
     max-width:100% on the headline/lede inside it was resolving
     against that oversized header, not the actual available space. */
  .pi-problem__header { width: 100%; }
  .pi-problem__callout { width: 100%; }
}

@media (max-width: 1023.98px) {
  .pi-problem {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 48px 20px;
  }
  .pi-problem__copy { gap: 24px; }
  .pi-problem__header { gap: 16px; }
  .pi-problem__headline {
    width: 100%;
    font-size: var(--pi-m-h2-size);
    line-height: var(--pi-m-h2-line);
  }
  .pi-problem__lede {
    width: 100%;
    font-size: var(--pi-m-body-lrg-size);
    line-height: var(--pi-m-body-lrg-line);
  }
  .pi-problem__callout-text {
    width: 100%;
    font-size: 20px;
    line-height: 28px;
  }
  .pi-pain-card {
    padding: 24px;
    gap: 18px;
    flex-direction: column;
  }
  .pi-pain-card__icon { width: 44px; height: 44px; }
  .pi-pain-card__title { font-size: var(--pi-m-card-title-size); line-height: var(--pi-m-card-title-line); }
  .pi-pain-card__description { font-size: 15px; line-height: 24px; }
}

/* ---- How It Connects teaser (85:6450 desktop, 247:10448 mobile) ---- */
.pi-hic-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 70px;
  max-width: 1512px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--pi-bg-page);
}
.pi-hic-teaser__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.pi-hic-teaser__eyebrow {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-eyebrow-size);
  line-height: var(--pi-label-eyebrow-line);
  letter-spacing: var(--pi-label-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--pi-accent-orange-text);
}
.pi-hic-teaser__headline {
  margin: 0;
  width: 1240px;
  max-width: 100%;
  font-family: var(--pi-font-display);
  font-weight: 400;
  font-size: var(--pi-h2-size);
  line-height: var(--pi-h2-line);
  letter-spacing: -2%;
  color: var(--pi-text-primary);
}
.pi-hic-teaser__headline-highlight {
  font-weight: 700;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.pi-hic-teaser__lede {
  margin: 0;
  width: 820px;
  max-width: 100%;
  font-family: var(--pi-font-body);
  font-size: var(--pi-body-lrg-size);
  line-height: var(--pi-body-lrg-line);
  color: var(--pi-text-body);
}
.pi-hic-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-eyebrow-size);
  line-height: var(--pi-label-eyebrow-line);
  letter-spacing: var(--pi-label-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--pi-accent-orange-text);
}

.pi-hic-teaser__flow {
  display: flex;
  /* Writers/hub/readers are 3 different heights (387/341/523 at
     1512) - flex-start left them all top-aligned while the arrows
     between them were already centered on the row. */
  align-items: center;
  gap: 16px;
  width: 100%;
}
.pi-hic-teaser__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 330px;
  flex-shrink: 0;
}
.pi-hic-teaser__col-label {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--pi-label-nav-tracking);
  text-transform: uppercase;
  color: var(--pi-text-muted);
}
.pi-hic-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--pi-bg-surface);
  border: 1px solid;
  border-left-width: 3px;
}
.pi-hic-node--write { border-color: rgba(255,94,77,0.45); }
.pi-hic-node--read { border-color: rgba(158,163,255,0.45); }
.pi-hic-node__title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.pi-hic-node__title p {
  margin: 0;
  flex: 1 0 0;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-card-title-size);
  line-height: var(--pi-card-title-line);
  color: var(--pi-text-primary);
}
.pi-hic-node__body {
  margin: 0;
  font-family: var(--pi-font-body);
  font-size: var(--pi-body-sml-size);
  line-height: var(--pi-body-sml-line);
  color: var(--pi-text-body);
}
.pi-hic-node__meta {
  margin: 0;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: var(--pi-label-meta-size);
  letter-spacing: var(--pi-label-meta-tracking);
  text-transform: uppercase;
  color: var(--pi-text-muted);
}

/* padding-top:60px was a guess at centering this on the hub at
   1512 - the hub's own height changes with viewport width (its tile
   grid reflows, its side columns reflow), so a fixed offset drifts out
   of alignment at other widths (204px off at 1200). align-self:center
   centers it against the row's actual cross-axis instead, which tracks
   the hub (and this arrow's own sibling column cards) at every width. */
.pi-hic-teaser__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 10px;
  flex-shrink: 0;
}
.pi-hic-teaser__arrow-label {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pi-bg-raised);
  border: 1px solid var(--pi-border-subtle);
  font-family: var(--pi-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pi-text-secondary);
  white-space: nowrap;
}
.pi-hic-teaser__arrow-track { position: relative; display: block; }
.pi-hic-teaser__arrow-line { width: 72px; height: 12px; display: block; }
.pi-hic-pulse-dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--pi-accent-orange); box-shadow: 0 0 8px 2px rgba(255,80,0,0.7); opacity: 0; pointer-events: none; }
.pi-hic-pulse-dot--pink { background: var(--pi-accent-pink); box-shadow: 0 0 8px 2px rgba(255,94,156,0.7); }
.pi-hic-pulse-dot.is-pulsing { animation: pi-hic-pulse 600ms ease-out; }
/* Transform instead of left. The 72px track and 6px dot
   are both fixed sizes everywhere this runs (including rotated on
   mobile), so 66px (72 - 6) is the real, constant travel distance -
   translateX(100%) would otherwise resolve against the 6px dot, not
   the 72px track. */
@keyframes pi-hic-pulse { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(66px); opacity: 0; } }

.pi-hic-shopify {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: 1 0 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 28px;
  border-radius: 20px;
  background: var(--pi-bg-raised);
  border: 1px solid rgba(107,222,79,0.55);
  box-shadow: 0 0 60px 0 rgba(107,222,79,0.12);
}
.pi-hic-shopify.is-breathing { animation: pi-hic-hub-breathe 500ms ease-out; }
@keyframes pi-hic-hub-breathe {
  0%, 100% { box-shadow: 0 0 60px 0 rgba(107,222,79,0.12); border-color: rgba(107,222,79,0.55); }
  40% { box-shadow: 0 0 80px 10px rgba(107,222,79,0.35); border-color: rgba(107,222,79,0.9); }
}
.pi-hic-shopify__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi-hic-shopify__tag {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--pi-label-nav-tracking);
  text-transform: uppercase;
  color: var(--pi-success);
}
.pi-hic-shopify__title {
  margin: 0;
  font-family: var(--pi-font-display);
  font-weight: 300;
  font-size: var(--pi-h3-size);
  line-height: var(--pi-h3-line);
  letter-spacing: -0.01em;
  color: var(--pi-text-primary);
}
.pi-hic-shopify__holds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.pi-hic-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.pi-hic-tile__title {
  margin: 0;
  font-family: var(--pi-font-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: var(--pi-text-primary);
}
.pi-hic-tile__body {
  margin: 0;
  font-family: var(--pi-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--pi-text-body);
}

.pi-hic-swap-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.pi-hic-swap-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  border-radius: 999px;
}
.pi-hic-swap-note p {
  margin: 0;
  font-family: var(--pi-font-body);
  font-size: var(--pi-body-sml-size);
  line-height: var(--pi-body-sml-line);
  color: var(--pi-text-subtitle);
}

/* The 330px writer/reader columns plus the two 72px arrow tracks
   already consume nearly the full 1512px-tuned width, leaving the
   flexible Shopify card almost no room - its 2-col tile grid then
   forces it wider than that and it overlaps the readers column. Let
   the side columns flex down and drop the tile grid to a single
   column, same relief valve already used for .pi-nav/.pi-proof in
   this band. Originally capped at 1279.98px, which only pushed the
   squeeze one tier up: 1280-1439 kept the fixed 330px columns plus
   the 2x2 tile grid reverting immediately, so tile text was still
   68-148px wide ("The vehicle travels with every order" ran to 7
   lines). Extended to 1439.98 so the hub keeps its full width (and
   single-column tile stack) through the whole squeezed range. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .pi-hic-teaser__col { flex: 1 1 0; width: auto; min-width: 0; }
  .pi-hic-shopify { flex: 1.3 1 0; }
  .pi-hic-shopify__holds { grid-template-columns: 1fr; }
}

@media (max-width: 1023.98px) {
  .pi-hic-teaser {
    align-items: stretch;
    gap: 32px;
    padding: 48px 20px;
  }
  .pi-hic-teaser__header { align-items: flex-start; text-align: left; gap: 16px; }
  .pi-hic-teaser__headline { width: 100%; font-size: var(--pi-m-h2-size); line-height: var(--pi-m-h2-line); }
  .pi-hic-teaser__lede { width: 100%; font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }

  .pi-hic-teaser__flow { flex-direction: column; align-items: stretch; gap: 12px; }
  .pi-hic-teaser__col { width: 100%; }
  .pi-hic-teaser__arrow { flex-direction: row; justify-content: center; padding-top: 0; height: 72px; position: relative; }
  .pi-hic-teaser__arrow-track { transform: rotate(90deg); width: 72px; }
  /* The label sat in normal flow with no coordinates, so it had
     nothing to do but collapse to a point - give it the pill a place
     to sit, centered over the now-vertical line and above it in the
     stacking order (the label is first in the DOM, so without a
     z-index the track painted later, on top, ran right through it). */
  .pi-hic-teaser__arrow-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }

  .pi-hic-shopify { padding: 24px; }
  .pi-hic-shopify__title { font-size: var(--pi-m-h3-size); line-height: var(--pi-m-h3-line); }
  .pi-hic-shopify__holds { grid-template-columns: 1fr; }
  .pi-hic-tile__title { font-size: 15px; }

  .pi-hic-swap-note { border-radius: 16px; padding: 16px 18px 16px 16px; align-items: flex-start; }
  .pi-hic-swap-note p { font-size: 15px; line-height: 24px; }
}

/* ---- Proof (17:275 desktop, 247:10457 mobile) ---- */
.pi-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 70px;
  max-width: 1512px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--pi-bg-page);
}
.pi-proof__card {
  position: relative;
  display: flex;
  /* Stretch (not center) so the dividers can take the stats'
     own height via align-self, and a real 40px gap instead of
     space-between's leftover-space split, which gave 24px at 1512 but
     0 at 1280 - squeezing "0.9% -> 1.7%" flush against the line. */
  align-items: stretch;
  gap: 40px;
  width: 100%;
  overflow: hidden;
  padding: 60px 64px;
  border-radius: 20px;
  background: var(--pi-bg-surface);
  border: 1px solid var(--pi-accent-orange);
  box-sizing: border-box;
}
.pi-proof__glow {
  position: absolute;
  top: -301px;
  left: 379px;
  width: 700px;
  height: 700px;
  max-width: none; /* same framework.css "main img" override as the logo wall track */
  pointer-events: none;
  z-index: 0;
}
.pi-proof__stat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.pi-proof__value {
  margin: 0;
  font-family: var(--pi-font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 58px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.pi-proof__label {
  margin: 0;
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pi-text-primary);
}
.pi-proof__client {
  margin: 0;
  font-family: var(--pi-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--pi-text-body);
}
.pi-proof__divider {
  position: relative;
  z-index: 1;
  width: 1px;
  align-self: stretch;
  height: auto;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.pi-proof__footnote {
  margin: 0;
  font-family: var(--pi-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--pi-text-muted);
}

/* Fixed 270px-wide stats fit fine at 1512 but overflow/crowd together
   between 1024 and ~1279 (no Figma frame covers this range) - shrink
   and let them share space fluidly, same approach as the Nav fix just
   above this breakpoint elsewhere in the file.
   Stats now flex at every width (base rule), and the divider's
   height always matches them via align-items:stretch - this tier only
   needs to keep the value from reaching the divider as the card
   narrows, down from 50px. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .pi-proof__card { padding: 44px 32px; }
  .pi-proof__value { font-size: clamp(40px, 3.4vw, 50px); line-height: 1.2; white-space: normal; }
}

@media (max-width: 1023.98px) {
  .pi-proof {
    align-items: stretch;
    gap: 32px;
    padding: 48px 20px;
  }
  .pi-proof__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 24px;
  }
  .pi-proof__glow { top: -301px; left: -176px; }
  .pi-proof__stat { width: 100%; }
  /* A fixed 50px/nowrap value like "0.9% -> 1.7%" runs past the
     card at narrow widths (16px over at 320) - clamp() only shrinks it
     once there's actually not enough room (it still resolves to the
     full 50px above ~417px), rather than shrinking every stat
     regardless of whether it needs it. */
  .pi-proof__value { font-size: clamp(36px, 12vw, 50px); }
  .pi-proof__divider { display: none; }
  .pi-proof__footnote { width: 100%; }
}

/* ---- How It Works (17:298 desktop, 247:10987 mobile) ---- */
.pi-hiw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 70px;
  max-width: 1512px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--pi-bg-page);
}
.pi-hiw__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.pi-hiw__eyebrow {
  font-family: var(--pi-font-body); font-weight: 700;
  font-size: var(--pi-label-eyebrow-size); line-height: var(--pi-label-eyebrow-line);
  letter-spacing: var(--pi-label-eyebrow-tracking); text-transform: uppercase;
  background: var(--pi-grad-fyre); background-clip: text; -webkit-background-clip: text; color: transparent;
}
.pi-hiw__headline {
  margin: 0; width: 900px; max-width: 100%;
  font-family: var(--pi-font-display); font-weight: 400;
  font-size: var(--pi-h2-size); line-height: var(--pi-h2-line); letter-spacing: -2%;
  color: var(--pi-text-primary);
}
.pi-hiw__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); background-clip: text; -webkit-background-clip: text; color: transparent; }
.pi-hiw__lede { margin: 0; width: 760px; max-width: 100%; font-family: var(--pi-font-body); font-size: var(--pi-body-lrg-size); line-height: var(--pi-body-lrg-line); color: var(--pi-text-secondary); }

.pi-hiw__journey { display: flex; gap: 48px; align-items: flex-start; width: 100%; box-sizing: border-box; }
.pi-hiw__step-list { display: flex; flex-direction: column; gap: 10px; width: 460px; flex-shrink: 0; }
/* A real button now (role=tab), not a div - reset the
   native button chrome back to how the div looked. */
.pi-hiw-step { display: block; position: relative; width: 100%; box-sizing: border-box; padding: 22px 24px 22px 28px; border: 0; border-bottom: 1px solid var(--pi-border-subtle); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.pi-hiw-step.is-active { cursor: default; }
/* The ::before gradient line is a straight-edged absolute box;
   without overflow:hidden it pokes past this step's own 16px rounded
   corners instead of being clipped to them. */
.pi-hiw-step.is-active { overflow: hidden; border: 1px solid var(--pi-border-subtle); border-radius: 16px; background: var(--pi-bg-raised); display: flex; flex-direction: column; gap: 12px; }
.pi-hiw-step.is-active::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--pi-grad-fyre); border-radius: 2px; }
.pi-hiw-step__top { display: flex; align-items: center; gap: 14px; width: 100%; }
.pi-hiw-step__index { font-family: var(--pi-font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--pi-text-muted); }
.pi-hiw-step.is-active .pi-hiw-step__index { color: var(--pi-accent-orange-text); }
/* R6-06: one inline SVG per step now (stroke="currentColor"), so the
   active/inactive swap other steps already got right is just a color
   change instead of two separate icon files at two different native
   sizes (the previous source of the shape/stroke-weight mismatch). */
.pi-hiw-step__icon { flex-shrink: 0; color: #8F8F8F; transition: color var(--pi-motion-base) var(--pi-ease-out); }
.pi-hiw-step.is-active .pi-hiw-step__icon { color: #FF6620; }
.pi-hiw-step__title { margin: 0; flex: 1 0 0; font-family: var(--pi-font-body); font-weight: 700; font-size: var(--pi-card-title-size); line-height: var(--pi-card-title-line); color: var(--pi-text-secondary); }
.pi-hiw-step.is-active .pi-hiw-step__title { color: var(--pi-text-primary); }
.pi-hiw-step__description { display: block; margin: 0; font-family: var(--pi-font-body); font-size: var(--pi-body-sml-size); line-height: var(--pi-body-sml-line); color: var(--pi-text-body); }
.pi-hiw-step:not(.is-active) .pi-hiw-step__description,
.pi-hiw-step:not(.is-active) .pi-hiw-step__progress { display: none; }
.pi-hiw-step__progress { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.pi-hiw-step__progress-fill { display: block; height: 100%; width: 0; background: var(--pi-grad-fyre); }
/* Fills left to right over 9s (was 6s, too quick to
   read the step's own description before it moved on) while this step
   is active and the section is in view; pauses (but keeps its current
   width) when the tab goes hidden or the section scrolls offscreen.
   animationend (pi-motion.js) advances to the next step. */
.pi-hiw-step.is-filling .pi-hiw-step__progress-fill { animation: pi-hiw-fill 9s linear forwards; }
.pi-hiw-step.is-paused .pi-hiw-step__progress-fill { animation-play-state: paused; }

.pi-hiw-panel {
  position: relative;
  overflow: hidden;
  /* A grid so the 4 stages can stack in the same cell below
     .pi-hiw-panel__top (row 1, auto-placed) and crossfade instead of
     display:none/flex swapping between them - the whole reason that
     swap looked like a jump. */
  display: grid;
  grid-template-rows: auto 1fr;
  /* With no explicit column track this grid's one implicit
     column sizes by auto, whose minimum is each stage's own
     min-content width - Step 01's embedded 560px vehicle-selector
     mock (fixed-width fields, no room to shrink) forced the column,
     and so the whole panel, to grow to fit it instead of staying
     panel-width. minmax(0, 1fr) lets the track shrink below that. */
  grid-template-columns: minmax(0, 1fr);
  flex: 1 0 0;
  min-width: 0;
  height: 600px;
  box-sizing: border-box;
  padding: 28px 32px;
  border-radius: 24px;
  background: var(--pi-bg-surface);
  border: 1px solid var(--pi-border-subtle);
}
.pi-hiw-panel__glow { position: absolute; left: -19px; top: 139px; width: 760px; height: auto; max-width: none; z-index: 0; pointer-events: none; }
.pi-hiw-panel__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-hiw-panel__label { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.pi-hiw-panel__step { font-family: var(--pi-font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--pi-accent-orange-text); }
.pi-hiw-panel__title { font-family: var(--pi-font-body); font-weight: 900; font-size: 13px; letter-spacing: var(--pi-label-nav-tracking); text-transform: uppercase; color: var(--pi-text-secondary); }
.pi-hiw-panel__dots { display: flex; gap: 6px; align-items: center; }
.pi-hiw-panel__dots span { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.16); }
.pi-hiw-panel__dots span.is-active { width: 28px; background: var(--pi-grad-fyre); }
/* All 4 stack in the same grid cell (row 2, set on .pi-hiw-panel
   above) and crossfade instead of display:none/flex swapping, which
   jumped straight from one stage to the next with nothing in between.
   The outgoing stage's 200ms comes from this base rule (read when
   .is-active is REMOVED); the incoming one's 300ms + 8px rise comes
   from the .is-active rule below (read when it's ADDED) - same
   per-direction-duration trick as the footer reveal's loop fades. */
.pi-hiw-panel__stage {
  grid-area: 2 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms var(--pi-ease-out), transform 200ms var(--pi-ease-out);
}
.pi-hiw-panel__stage.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 300ms var(--pi-ease-out), transform 300ms var(--pi-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .pi-hiw-panel__stage,
  .pi-hiw-panel__stage.is-active { transition: none; }
}

/* 1024-1279.98px: the 460px step list plus the panel's own padding
   leaves the embedded vehicle-selector mock (560px, with fixed-width
   Year/Engine selects inside) almost no room, overlapping its own
   fields. Let the step list flex down and scale the mock to fit
   rather than re-plumbing every fixed-width field inside it. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-hiw__step-list { flex: 1 1 0; width: auto; min-width: 0; }
  .pi-hiw-panel { flex: 1.5 1 0; }
  .pi-hiw-panel__stage > .pi-ui-mock,
  .pi-hiw-panel__stage > .pi-ui-timeline { transform: scale(0.78); }
}

/* Figma insets the journey 70px past the section's own 70px
   padding and holds the panel at a fixed 724px (460 list + 48 gap +
   724 panel = 1232, which is exactly what's left of the 1512 frame
   once both insets are counted). .pi-hiw-panel's flex:1 0 0 already
   lands on exactly 724px once this room is carved out, so the panel
   doesn't need its own width rule - it just needs the insets. Scoped
   to 1280+ so the already-cramped 1024-1279.98px band above (which
   deliberately ignores Figma to keep the embedded vehicle-selector
   mock usable) is untouched; the mock's own max-width:100% handles
   the narrower end of this range too. */
@media (min-width: 1280px) {
  .pi-hiw__journey { padding: 0 70px; }
}

/* Same shape of bug as the 1024-1279.98 tier above, at the next
   width up - the panel is 492px wide at 1280 and 578px at 1366, both
   narrower than Step 01's 560px vehicle-selector mock, which cut off
   its Engine field and My Garage link by up to 101px. Keeps the
   selector at its real 560px (not squeezed to the panel's own
   max-width: 100%, which would overlap its fixed-width fields) and
   scales the whole stage down to fit instead, same technique as the
   tier below. */
@media (min-width: 1280px) and (max-width: 1365.98px) {
  .pi-hiw-panel__stage .pi-ui-vehicle-selector { max-width: none; }
  .pi-hiw-panel__stage > .pi-ui-mock,
  .pi-hiw-panel__stage > .pi-ui-timeline { transform: scale(0.76); }
}
@media (min-width: 1366px) and (max-width: 1439.98px) {
  .pi-hiw-panel__stage .pi-ui-vehicle-selector { max-width: none; }
  .pi-hiw-panel__stage > .pi-ui-mock,
  .pi-hiw-panel__stage > .pi-ui-timeline { transform: scale(0.9); }
}

/* ---- Mobile: tabs + slider ---- */
.pi-hiw-mobile { display: none; }
.pi-hiw-mobile__tabs { display: flex; gap: 6px; width: 100%; }
/* A real button now (role=tab), not a div */
.pi-hiw-mobile__tab { flex: 1 0 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; background: none; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; }
.pi-hiw-mobile__track { display: block; height: 3px; border-radius: 2px; background: var(--pi-bg-raised); overflow: hidden; }
.pi-hiw-mobile__track-fill { display: block; height: 100%; width: 0; background: var(--pi-grad-fyre); }
/* Fills left to right over 9s (matching the desktop
   steps above) while this tab is active and in view; pauses mid-fill
   while the slider is being touched/dragged. animationend
   (pi-motion.js) advances to the next tab. */
.pi-hiw-mobile__tab.is-filling .pi-hiw-mobile__track-fill { animation: pi-hiw-fill 9s linear forwards; }
.pi-hiw-mobile__tab.is-paused .pi-hiw-mobile__track-fill { animation-play-state: paused; }
.pi-hiw-mobile__tab span:last-child { margin: 0; font-family: var(--pi-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-text-muted); white-space: nowrap; }
.pi-hiw-mobile__tab.is-active span:last-child { color: var(--pi-text-primary); }
@keyframes pi-hiw-fill { from { width: 0; } to { width: 100%; } }

.pi-hiw-mobile__slider { display: flex; gap: 12px; width: calc(100% + var(--pi-gutter) * 2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
.pi-hiw-mobile__slider::-webkit-scrollbar { display: none; }
.pi-hiw-slide { scroll-snap-align: start; flex: 0 0 350px; max-width: calc(100% - 24px); border-radius: 20px; background: var(--pi-bg-surface); border: 1px solid var(--pi-border-ui-light); overflow: hidden; }
.pi-hiw-slide__visual { position: relative; height: 430px; box-sizing: border-box; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pi-hiw-slide__glow { position: absolute; left: -85px; top: 60px; width: 520px; height: auto; max-width: none; z-index: 0; pointer-events: none; }
/* Wraps each slide's mock composition (varies per step - vehicle
   selector + Fits badge, search results, product page, reminder
   email) so it can scale as one unit below 375px, same technique as
   Platform/Industries' visual-inner wrappers. */
.pi-hiw-slide__visual-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* The slide itself already shrinks from 350px to fit phones
   under 374px (flex:0 0 350px; max-width:calc(100% - 24px)), but its
   mock content didn't - the Fits badge (nowrap, sized for its full
   "Fits your ... Cummins" text) and the vehicle-selector tabs
   (flex-shrink:0 by design) ran past the slide's edges at 320 and 360.
   Scale the whole composition down to match the slide's own shrink. */
@media (max-width: 374.98px) {
  .pi-hiw-slide__visual-inner { transform: scale(0.7); }
}
.pi-hiw-slide__text { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.pi-hiw-slide__title-row { display: flex; align-items: center; gap: 10px; }
.pi-hiw-slide__index { font-family: var(--pi-font-mono); font-weight: 500; font-size: 13px; color: var(--pi-accent-orange-text); }
.pi-hiw-slide__title-row p { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: var(--pi-m-card-title-size); line-height: var(--pi-m-card-title-line); color: var(--pi-text-primary); }
.pi-hiw-slide__body { margin: 0; font-family: var(--pi-font-body); font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); color: var(--pi-text-secondary); }


/* Product Page mock */

/* Reminder Email + timeline mock */
.pi-ui-reminder-email { width: 318px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pi-ui-reminder-email__from { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-reminder-email__from-left { display: flex; align-items: center; gap: 10px; }
.pi-ui-reminder-email__tile { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--pi-grad-fyre); flex-shrink: 0; }
.pi-ui-reminder-email__from-text { display: flex; flex-direction: column; gap: 2px; }
.pi-ui-reminder-email__from-text strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-reminder-email__from-text em { font-style: normal; font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-ui-dark-2); }
.pi-ui-reminder-email__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: #e0f5eb; font-family: var(--pi-font-ui); font-weight: 600; font-size: 10px; color: var(--pi-success-deep); white-space: nowrap; flex-shrink: 0; }
.pi-ui-reminder-email__subject { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--pi-text-ui-dark); }
.pi-ui-reminder-email__body { margin: 0; font-family: var(--pi-font-ui); font-size: 13px; line-height: 1.45; color: var(--pi-text-ui-dark-2); }
.pi-ui-reminder-email__product { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #f9f7f6; }
.pi-ui-reminder-email__product-tile { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.pi-ui-reminder-email__product-tile img { width: 100%; height: 100%; object-fit: cover; }
.pi-ui-reminder-email__product-text { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pi-ui-reminder-email__product-text em { font-style: normal; font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-reminder-email__product-text strong { font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-reminder-email__reorder { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--pi-grad-fyre); color: white; font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; cursor: pointer; transition: transform 160ms ease-out; }
/* The Step 04 loop's "press" beat (pi-motion.js) */
.pi-ui-reminder-email__reorder.is-pressed { transform: scale(0.97); }
/* The card no longer has a rise-in (it used to add/clear
   .is-out once per loop repeat, popping in and out every 9s even
   while a visitor was already looking at it) - it just renders at
   rest, same as the mobile slide always has. */
.pi-ui-reminder-email__chip { transition: opacity 300ms ease-out; }

/* Port of the demo's richer timeline (point title + detail
   under each label, a "+$84.50" floater off the Sep dot) - the panel
   is wide enough here that the extra two lines per point read fine,
   unlike the plain Mar/Jun/Sep/Nov labels the mobile slide card has
   room for alone. */
.pi-ui-timeline { position: relative; width: 318px; height: 92px; }
/* Track ran the full 318px (0-100%), but the first node (Mar)
   centers at 12% and the last (Nov) at 88% - full width left the line
   running 38px past each end with nothing there. 12%/88% match the 4
   points' own inline left offsets below exactly (this component only
   ever renders these same 4). */
.pi-ui-timeline__track { position: absolute; left: 12%; right: 12%; top: 7px; height: 2px; background: rgba(255,255,255,0.14); }
/* Shares the track's new left:12% origin, so its own width is
   now relative to that (50% reaches the same absolute 62% - Sep's
   center - that the old 0%-based 62% did) rather than measured from
   the container's true edge, which the old stepped-fill (1/3, 2/3 of
   the full 318px) was doing regardless of where the real nodes sat. */
.pi-ui-timeline__progress { position: absolute; left: 12%; top: 7px; height: 2px; border-radius: 1px; background: var(--pi-grad-fyre); transition: width 1000ms ease-in-out; }
.pi-ui-timeline__point { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 76px; text-align: center; }
.pi-ui-timeline__node { position: relative; width: 10px; height: 10px; border-radius: 999px; margin: 2px 0 7px; background: #3a3634; transition: background-color 300ms ease-out, box-shadow 300ms ease-out; }
.pi-ui-timeline__point.is-on .pi-ui-timeline__node { background: var(--pi-accent-orange); animation: pi-hiw-dotpop 420ms cubic-bezier(.3,1.6,.5,1); }
.pi-ui-timeline__point--active.is-on .pi-ui-timeline__node { width: 14px; height: 14px; margin: 0 0 7px; background: #fff; box-shadow: 0 0 0 3px var(--pi-accent-orange); }
.pi-ui-timeline__point--active.is-on .pi-ui-timeline__node::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: rgba(255,80,0,0.3); z-index: -1; animation: pi-hiw-halo 1.6s ease-out infinite; }
.pi-ui-timeline__point--next .pi-ui-timeline__node { background: #1a1918; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); }
.pi-ui-timeline__label { font-family: var(--pi-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--pi-text-muted); transition: color 300ms ease-out; }
.pi-ui-timeline__point.is-on .pi-ui-timeline__label { color: var(--pi-accent-orange-text); }
.pi-ui-timeline__point-title { font-family: var(--pi-font-ui); font-weight: 600; font-size: 12px; color: var(--pi-text-muted); transition: color 300ms ease-out; }
.pi-ui-timeline__point.is-on .pi-ui-timeline__point-title { color: var(--pi-text-primary); }
.pi-ui-timeline__point-detail { font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-text-muted); }
.pi-ui-timeline__point--active.is-on .pi-ui-timeline__point-detail { color: var(--pi-accent-orange-text); }
.pi-ui-timeline__plus { position: absolute; top: -16px; left: 50%; font-style: normal; font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-accent-orange-text); opacity: 0; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap; }
.pi-ui-timeline__plus.is-go { animation: pi-hiw-plusup 1500ms ease-out forwards; }

@keyframes pi-hiw-dotpop { from { transform: scale(0.4); } }
@keyframes pi-hiw-halo { from { transform: scale(0.55); opacity: 0.95; } to { transform: scale(1.7); opacity: 0; } }
@keyframes pi-hiw-plusup { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }
@media (prefers-reduced-motion: reduce) {
  .pi-ui-timeline__point--active.is-on .pi-ui-timeline__node { animation: none; }
  .pi-ui-timeline__point--active.is-on .pi-ui-timeline__node::after { animation: none; opacity: 0.5; transform: scale(1.2); }
}

/* ---- Live Demo callout (shared by How It Works + elsewhere later) ---- */
.pi-live-demo {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 1146px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 28px 32px;
  border-radius: 24px;
  background: var(--pi-bg-surface);
  border: 1px solid var(--pi-accent-orange);
}
.pi-live-demo__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 0 0; min-width: 0; }
.pi-live-demo__live { display: flex; align-items: center; gap: 8px; }
.pi-live-demo__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pi-success); }
.pi-live-demo__live span { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; letter-spacing: var(--pi-label-nav-tracking); text-transform: uppercase; color: var(--pi-text-primary); }
.pi-live-demo__title { margin: 0; font-family: var(--pi-font-body); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--pi-text-primary); }
.pi-live-demo__body { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }
.pi-live-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pi-live-demo__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--pi-bg-raised); border: 1px solid var(--pi-border-ui-light); font-family: var(--pi-font-body); font-weight: 500; font-size: 13px; color: var(--pi-text-secondary); white-space: nowrap; }
.pi-live-demo__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.pi-live-demo__note { margin: 0; font-family: var(--pi-font-body); font-size: 12px; color: var(--pi-text-body); white-space: nowrap; }

@media (max-width: 1023.98px) {
  .pi-hiw { align-items: stretch; gap: 32px; padding: 48px 20px; }
  .pi-hiw__header { align-items: flex-start; text-align: left; gap: 16px; }
  .pi-hiw__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-hiw__lede { width: 100%; font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); }
  .pi-hiw__journey { display: none; }
  .pi-hiw-mobile { display: flex; flex-direction: column; gap: 24px; width: 100%; }

  .pi-live-demo { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 20px; border-radius: 20px; }
  .pi-live-demo__title { font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }
  .pi-live-demo__actions { width: 100%; }
  .pi-live-demo__actions .pi-btn { width: 100%; }
}

/* ---- Mobile (below 1024px, per the Build System breakpoint rule) ---- */
@media (max-width: 1023.98px) {
  .pi-hero__content {
    padding: 108px 20px 64px;
    gap: 22px;
  }
  .pi-hero__headline {
    font-size: 44px;
    letter-spacing: -1.32px;
  }
  .pi-hero__lede {
    font-size: 17px;
    line-height: 27px;
  }
  .pi-hero__buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .pi-hero__buttons .pi-btn {
    width: 100%;
    padding: 15px 28px;
  }
  .pi-hero__buttons .pi-btn span {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.3px;
  }
  .pi-hero__webinar-icon--desktop { display: none; }
  .pi-hero__webinar-icon--mobile { display: block; }

  .pi-fitment-search { width: 350px; max-width: 100%; }
  .pi-fitment-search__row--desktop,
  .pi-fitment-pill--desktop {
    display: none;
  }
  .pi-fitment-tabs--mobile {
    display: flex;
    width: 100%;
  }
  .pi-fitment-tabs--mobile .pi-fitment-tab {
    flex: 1 0 0;
    flex-direction: column;
    gap: 5px;
    padding: 9px 4px;
    font-size: 11px;
  }
  .pi-fitment-tabs--mobile .pi-fitment-tab__icon {
    width: 18px;
    height: 18px;
  }
  .pi-fitment-card--mobile {
    position: relative;
    /* See .pi-fitment-pill--desktop for why - the filter below
       makes this one case actually need it. */
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
    background: rgba(20,18,18,0.55);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    filter: drop-shadow(0px 20px 30px rgba(255,79,0,0.25));
    width: 100%;
    box-sizing: border-box;
  }
  .pi-fitment-card__segment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 4px);
    padding: 12px 12px 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    box-sizing: border-box;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background-color var(--pi-motion-fast) var(--pi-ease-out);
  }
  .pi-fitment-card__segment:disabled { cursor: default; opacity: 0.45; }
  .pi-fitment-card__segment[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
  .pi-fitment-card__segment.is-flash .pi-fitment-pill__value { animation: pi-fitment-flash 700ms var(--pi-ease-out); }
  .pi-fitment-menu { left: 0; right: 0; min-width: 0; }
  .pi-fitment-card__submit {
    width: 100%;
  }
}

/* ---- Home / Modules (19:461 desktop, 247:10506 mobile) ---- */
.pi-modules { display: flex; flex-direction: column; gap: 56px; padding-block: 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-modules__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; width: 100%; }
.pi-modules__heading { display: flex; flex-direction: column; gap: 20px; }
.pi-modules__eyebrow { margin: 0; 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-modules__headline { margin: 0; width: 720px; 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-modules__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-modules__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pi-modules__aside-body { margin: 0; width: 480px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-secondary); }

.pi-modules__carousel { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* A flex row's 56px row-gap vs 18px column-gap, plus
   flex-wrap's own per-line sizing, gave the two rows of 8 cards
   different heights (310 vs 282 at 1512) with uneven gaps around them.
   A real grid gives every row the tallest card's height and one even
   18px everywhere - the tablet and phone carousel tiers below
   still reset this to flex-wrap, unaffected. */
.pi-modules__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; width: 100%; }

.pi-modules__dots { display: none; }
.pi-modules__roadmap { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; box-sizing: border-box; padding: 26px 32px; border-radius: 20px; background: var(--pi-bg-surface); border: 1px dashed rgba(255,181,71,0.3); }
.pi-modules__roadmap-label { display: flex; flex-direction: column; gap: 6px; }
.pi-modules__roadmap-eyebrow { margin: 0; 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-warning); }
.pi-modules__roadmap-body { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-secondary); }
.pi-modules__roadmap-items { display: flex; align-items: center; gap: 28px; }
.pi-roadmap-item { display: flex; align-items: center; gap: 12px; }
.pi-roadmap-item p { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); }

/* .pi-modules__heading/.pi-modules__aside have no width of
   their own, so as flex children with justify-content: space-between
   they size to fit their 720px headline / 480px aside-body regardless
   of available space (720+480+40 gap+140 padding = 1380px needed) -
   below that the aside's sentence runs off, confirmed still happening
   at 1280 and 1366 since this band originally stopped at 1279.98,
   well short of the 1380px the fixed widths actually need. Same root
   cause as .pi-problem__header's own bug. */
@media (min-width: 1024px) and (max-width: 1379.98px) {
  .pi-modules__header { gap: 24px; }
  .pi-modules__heading { width: 100%; flex: 1.4 1 0; min-width: 0; }
  .pi-modules__aside { width: 100%; flex: 1 1 0; min-width: 0; }
}

@media (max-width: 1023.98px) {
  .pi-modules { padding: 48px 20px 64px; gap: 32px; }
  .pi-modules__header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pi-modules__heading { gap: 16px; width: 100%; }
  .pi-modules__headline { width: 100%; font-size: 32px; line-height: 39px; }
  .pi-modules__aside { width: 100%; gap: 24px; }
  .pi-modules__aside-body { width: 100%; font-size: 17px; line-height: 27px; }

  /* overflow-x:auto also clips the y axis, cutting off the
     hovered card's lifted top edge and its glow at the bottom. Reserve
     that room with padding and cancel it with an equal, opposite
     margin so the slider's own position in the page doesn't move. */
  /* The base rule above is now a grid - back to the carousel's
     own flex row here (this block's own flex-wrap/overflow-x do
     nothing on a grid container). */
  .pi-modules__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-block: 12px 32px; margin-block: -12px -32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-modules__grid::-webkit-scrollbar { display: none; }
  .pi-modules__grid .pi-module-card { flex: 0 0 296px; width: 296px; scroll-snap-align: start; padding: 24px; }
  .pi-modules__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

  .pi-modules__roadmap { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px; }
  .pi-modules__roadmap-body { font-size: 15px; line-height: 24px; }
  .pi-modules__roadmap-items { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .pi-roadmap-item { width: 100%; flex-wrap: wrap; }
  .pi-roadmap-item p { flex: 1; min-width: 0; font-size: 17px; line-height: 25px; }
  /* Icon + label + the "Coming Soon" tag (132px, flex-shrink:0,
     nowrap) don't fit one row at 320 - wrap the tag onto its own line,
     indented to sit under the label rather than the icon (22px icon +
     12px gap). */
  .pi-roadmap-item__tag { margin-left: 34px; }
}

/* ---- Home / Three Paths (19:676 desktop, 247:10541 mobile) ---- */
.pi-three-paths { position: relative; display: flex; flex-direction: column; align-items: center; gap: 60px; padding-block: 120px; padding-inline: var(--pi-content-pad); box-sizing: border-box; background: var(--pi-bg-surface); overflow: hidden; }
.pi-three-paths__glow { position: absolute; left: 300px; top: -500px; width: 900px; height: 900px; max-width: none; z-index: 0; pointer-events: none; }
.pi-three-paths__header { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pi-three-paths__eyebrow { margin: 0; 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-three-paths__headline { margin: 0; width: 860px; 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-three-paths__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-three-paths__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-three-paths__carousel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.pi-three-paths__grid { display: flex; gap: 18px; width: 100%; align-items: stretch; }
/* Unlike every other carousel's dot row on this page, this one
   never had a base display:none - only the mobile media query below
   set display:flex, so with nothing to override it the dots' default
   block display showed at every width, including 1024+ where the
   three cards sit in a row with nothing to scroll. Figma's desktop
   section has no dots. */
.pi-three-paths__dots { display: none; }
.pi-path-card { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; padding: 36px 34px; border-radius: 20px; background: var(--pi-bg-page); border: 1.5px solid rgba(255,255,255,0.06); transition: border-color var(--pi-motion-base) var(--pi-ease-out), box-shadow var(--pi-motion-base) var(--pi-ease-out); }
.pi-path-card__top { display: flex; align-items: center; gap: 14px; }
.pi-path-card__icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--pi-bg-raised-2); transition: background var(--pi-motion-base) var(--pi-ease-out); }
.pi-path-card__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-path-card__clicks { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: 56px; line-height: 60px; letter-spacing: -0.02em; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.pi-path-card__journey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; width: 100%; }
.pi-path-card__step { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--pi-bg-raised-2); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-text-subtitle); white-space: nowrap; transition: background-color var(--pi-motion-base) var(--pi-ease-out), color var(--pi-motion-base) var(--pi-ease-out); }
.pi-path-card__step.is-checkout { background: rgba(106,223,78,0.14); color: var(--pi-success); }
.pi-path-card__step.is-lit { background: rgba(255,80,0,0.16); color: var(--pi-accent-orange-text); }
.pi-path-card__step.is-checkout.is-lit { background: rgba(106,223,78,0.3); color: var(--pi-success); }
.pi-path-card.is-active { border-color: var(--pi-accent-orange); box-shadow: 0 20px 40px -20px rgba(255,80,0,0.4); }
.pi-path-card.is-active .pi-path-card__icon-tile { background: var(--pi-grad-fyre); }
.pi-path-card__chevron { flex-shrink: 0; }
.pi-path-card__description { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }

.pi-three-paths__footnote { position: relative; z-index: 1; margin: 0; max-width: 68ch; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-secondary); text-align: center; }

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

  /* See .pi-modules__grid above - also needed here even though
     .pi-path-card has no hover, since its .is-active glow (the ambient
     loop) clips against the same overflow-x:auto boundary. */
  .pi-three-paths__grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-block: 12px 32px; margin-block: -12px -32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-three-paths__grid::-webkit-scrollbar { display: none; }
  .pi-path-card { flex: 0 0 310px; width: 310px; scroll-snap-align: start; padding: 28px 24px; }
  .pi-three-paths__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

  .pi-three-paths__footnote { text-align: left; }
}

/* ---- Home / Native to Shopify (19:760 desktop, 247:10603 mobile) ---- */
.pi-nts { position: relative; display: flex; align-items: center; gap: 90px; padding-block: 100px 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; overflow-x: clip; overflow-y: visible; }
.pi-nts__visual { position: relative; flex-shrink: 0; width: 580px; height: 713px; }
.pi-nts__ellipse { position: absolute; max-width: none; pointer-events: none; z-index: 0; }
/* Ellipse 1 is the static glow behind the rings, same center and
   within 1.3% of the same size as the ring group's own outer edge
   (760/770px). The rings themselves are pi-rings.js's streaming
   system (data-pi-rings-host on the section), not separate ellipse
   images - sized and centered exactly like the old ellipse 5. */
.pi-nts__ellipse--1 { left: -90px; top: -27.5px; width: 760px; height: 760px; }
.pi-nts__rings { position: absolute; max-width: none; pointer-events: none; z-index: 0; overflow: visible; left: -95px; top: -32.5px; width: 770px; height: 770px; }

.pi-nts__visual .pi-ui-switchboard { position: relative; z-index: 1; left: 60px; width: 460px; }

.pi-nts__copy { display: flex; flex-direction: column; gap: 40px; flex: 1; min-width: 0; position: relative; z-index: 1; }
.pi-nts__header { display: flex; flex-direction: column; gap: 20px; }
.pi-nts__eyebrow { margin: 0; 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-nts__headline { margin: 0; width: 700px; 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-nts__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-nts__lede { margin: 0; width: 620px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-secondary); }

/* Fixed 300px items in a wrapping flex row left "No iframes or
   outside dashboards" (needs 323px) 23px over its own box, and once a
   row fit 3+ of them the overflow ran into the next item's icon. A
   two-column grid with minmax(0, 1fr) tracks has no fixed-width floor
   to overflow, and min-width:0 on the item itself lets the label wrap
   instead of forcing the track wider. */
.pi-nts__checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; width: 100%; }
.pi-nts-check-item { display: flex; align-items: center; gap: 12px; min-width: 0; height: auto; }
.pi-nts-check-item__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,80,0,0.16), rgba(255,94,156,0.16)); border: 1px solid var(--pi-accent-orange); }
.pi-nts-check-item p { margin: 0; font-family: var(--pi-font-body); font-size: 18px; line-height: 30px; color: var(--pi-text-subtitle); }

.pi-nts__badges { display: flex; align-items: center; gap: 36px; }
.pi-nts__badge-shopify { height: 40px; width: auto; }
.pi-nts__badge-algolia { height: 36px; width: auto; }

/* 1024-1279.98px: the fixed 580px visual plus 90px gap leaves the
   copy column (headline, lede, 300px nowrap checklist items) only
   ~214px at 1024px. Shrink the visual itself (the switchboard mock
   has its own max-width:100% and follows it down) rather than just
   scaling it visually, since flex allocation is based on the layout
   width, not the rendered size. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-nts { gap: 40px; }
  .pi-nts__visual { width: 400px; }
  .pi-nts__visual .pi-ui-switchboard { left: 0; }
}

@media (max-width: 1023.98px) {
  .pi-nts { flex-direction: column; align-items: stretch; gap: 32px; padding: 64px 20px; }
  .pi-nts__visual { width: 100%; height: auto; }
  .pi-nts__ellipse, .pi-nts__rings { display: none; }
  .pi-nts__visual .pi-ui-switchboard { position: static; width: 100%; }

  .pi-nts__header { gap: 16px; }
  .pi-nts__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-nts__lede { width: 100%; font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); }
  .pi-nts__checklist { grid-template-columns: 1fr; gap: 16px; }
  .pi-nts__badges { flex-wrap: wrap; gap: 24px; }
}

/* ---- Home / Industries (21:748 desktop, 247:10644 mobile) ---- */
.pi-industries { display: flex; flex-direction: column; gap: 60px; align-items: center; padding-block: 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-industries__header { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pi-industries__eyebrow { margin: 0; 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-industries__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-industries__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pi-industries__carousel { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.pi-industries__grid { display: flex; gap: 18px; width: 100%; align-items: stretch; }
.pi-industries__dots { display: none; }
/* The whole card is the link now (design change approved) -
   text-decoration/color reset for the a tag, "Explore" stays as a
   visual cue (a non-interactive span, not a second nested link). */
.pi-industry-card { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 34px 30px; border-radius: 20px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.06); transition: transform var(--pi-motion-base) var(--pi-ease-out), background 220ms var(--pi-ease-out), border-color 220ms var(--pi-ease-out), box-shadow 220ms var(--pi-ease-out); }
a.pi-industry-card { text-decoration: none; color: inherit; }
.pi-industry-card__icon-tile { transition: background 220ms var(--pi-ease-out); }
.pi-industry-card__link { transition: gap var(--pi-motion-base) var(--pi-ease-out); }
/* Single-action card lift */
@media (hover: hover) and (pointer: fine) {
  a.pi-industry-card:hover, a.pi-industry-card:focus-visible {
    transform: translateY(-4px);
    background: linear-gradient(var(--pi-bg-raised), var(--pi-bg-raised)) padding-box, var(--pi-grad-fyre) border-box;
    border-color: transparent;
    box-shadow: 0 22px 48px -18px rgba(255,80,0,0.45);
  }
  a.pi-industry-card:hover .pi-industry-card__link, a.pi-industry-card:focus-visible .pi-industry-card__link { gap: 12px; }
  a.pi-industry-card:active { transform: translateY(-2px) scale(0.99); }
}
@media (hover: none) {
  a.pi-industry-card:active { transition: transform 160ms var(--pi-ease-out); transform: scale(0.98); }
}
.pi-industry-card__icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--pi-accent-orange); background: linear-gradient(90deg, rgba(255,80,0,0.12), rgba(255,94,156,0.12)); }
.pi-industry-card__title { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); }
.pi-industry-card__fields { margin: 0; font-family: var(--pi-font-mono); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.06em; color: var(--pi-text-secondary); }
.pi-industry-card__description { margin: 0; flex: 1; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }
.pi-industry-card__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pi-industry-card__link span { font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pi-industries__also { display: flex; flex-direction: column; gap: 22px; width: 100%; }
.pi-industries__also-label { margin: 0; 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-industries__also-grid { display: flex; gap: 18px; width: 100%; align-items: stretch; }

@media (max-width: 1023.98px) {
  .pi-industries { align-items: stretch; gap: 32px; padding: 64px 20px; }
  .pi-industries__header { align-items: flex-start; text-align: left; gap: 16px; }
  .pi-industries__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }

  /* See .pi-modules__grid above. */
  .pi-industries__grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-block: 12px 32px; margin-block: -12px -32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-industries__grid::-webkit-scrollbar { display: none; }
  .pi-industry-card { flex: 0 0 300px; width: 300px; scroll-snap-align: start; padding: 28px 24px; }

  .pi-industries__also-label { text-align: left; }
  .pi-industries__also-grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-block: 12px 32px; margin-block: -12px -32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-industries__also-grid::-webkit-scrollbar { display: none; }
  .pi-also-card { flex: 0 0 300px; width: 300px; scroll-snap-align: start; }
  .pi-also-card__title { white-space: normal; }

  .pi-industries__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
}

/* ---- Laptop: rows built for four cards at 1512 stayed
   four-up at 1024-1279.98 too, leaving ~140px per card - titles broke
   over 3-4 lines and descriptions ran 8-11 lines tall. Two-up here,
   back to four-up at 1280 where there's room (extends the
   tablet 2-up rule into the laptop tier). Must come after every
   max-width:1023.98px block above to win the cascade in this range. */
/* "Where there's room" turned out to still be wrong through
   1365 - at 272px per card (1280's four-up share) descriptions ran a
   cramped 206px text column, 6 lines tall. Stays two-up through 1365;
   by 1366 four-up's own column (229px) is back to the same 4-5 line
   range the real copy already has at 1512 (not a clean 4 lines - some
   descriptions run 5 there too - just no worse than that reference
   width, which is what "where there's room" actually meant). */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .pi-industries__grid,
  .pi-industries__also-grid {
    flex-wrap: wrap;
  }
  /* Modules stays a grid (base rule) - just 2 columns here instead of 4, still with equal row heights and the same 18px gap. */
  .pi-modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-industries__grid .pi-industry-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-industries__also-grid .pi-also-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
}

/* ---- Home / Featured Case Study (21:814 desktop, 247:10712 mobile) ---- */
.pi-case-studies { display: flex; flex-direction: column; gap: 48px; padding-block: 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-case-studies__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.pi-case-studies__heading { display: flex; flex-direction: column; gap: 20px; }
.pi-case-studies__eyebrow { margin: 0; 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-case-studies__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); white-space: nowrap; }
.pi-case-studies__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* R6-07: now shares .pi-btn--secondary.pi-btn--medium with "Explore
   the Platform" (home/modules.php's aside button) instead of its own
   one-off gradient-text link style - flex-shrink is still needed here
   specifically, to keep it from being squeezed in this header's
   space-between row. */
.pi-case-studies__see-all { flex-shrink: 0; }

.pi-case-studies__carousel { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.pi-case-studies__dots { display: none; }
.pi-case-studies__grid { display: flex; gap: 18px; width: 100%; align-items: stretch; }
.pi-case-card { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 20px; background: var(--pi-bg-surface); border: 1px solid var(--pi-border-subtle); transition: transform var(--pi-motion-base) var(--pi-ease-out), background 220ms var(--pi-ease-out), border-color 220ms var(--pi-ease-out), box-shadow 220ms var(--pi-ease-out); }
.pi-case-card .pi-case-card__link { transition: gap var(--pi-motion-base) var(--pi-ease-out); }
/* Single-action card lift */
@media (hover: hover) and (pointer: fine) {
  .pi-case-card:hover, .pi-case-card:focus-within {
    transform: translateY(-4px);
    background: linear-gradient(var(--pi-bg-raised), var(--pi-bg-raised)) padding-box, var(--pi-grad-fyre) border-box;
    border-color: transparent;
    box-shadow: 0 22px 48px -18px rgba(255,80,0,0.45);
  }
  .pi-case-card:hover .pi-case-card__link, .pi-case-card:focus-within .pi-case-card__link { gap: 12px; }
  .pi-case-card:active { transform: translateY(-2px) scale(0.99); }
  .pi-case-card__link--pdf:hover { background: var(--pi-grad-fyre); border-color: transparent; transition-duration: 160ms; }
  .pi-case-card__link--pdf:hover img { transform: translateY(2px); transition-duration: 160ms; }
}
@media (hover: none) {
  .pi-case-card:active { transition: transform 160ms var(--pi-ease-out); transform: scale(0.98); }
}
.pi-case-card__top { display: flex; flex-direction: column; gap: 12px; }
.pi-case-card__industry { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,79,0,0.12); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-accent-orange-text); }
.pi-case-card__client { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); }
.pi-case-card__stats { display: flex; gap: 28px; padding: 20px 0; border-top: 1px solid var(--pi-border-subtle); border-bottom: 1px solid var(--pi-border-subtle); }
.pi-case-card__stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-case-card__stat-value { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-case-card__stat-label { margin: 0; font-family: var(--pi-font-body); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-text-secondary); }
.pi-case-card__description { margin: 0; flex: 1; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }
.pi-case-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-case-card__tag { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-text-secondary); white-space: nowrap; }
/* See pi-case-studies.css for why this wrapper only appears
   when a PDF link joins the existing one. */
.pi-case-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.pi-case-card__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pi-case-card__link span { font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-accent-orange-text); }
.pi-case-card__link--pdf { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); transition: background 220ms var(--pi-ease-out), border-color 220ms var(--pi-ease-out); }
.pi-case-card__link--pdf span { color: var(--pi-text-primary); }
.pi-case-card__link--pdf img { transition: transform 220ms var(--pi-ease-out); }

@media (max-width: 1023.98px) {
  .pi-case-studies { gap: 32px; padding: 64px 20px; }
  .pi-case-studies__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pi-case-studies__headline { width: 100%; white-space: normal; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }

  /* See .pi-modules__grid above. */
  .pi-case-studies__grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pi-gutter); -webkit-overflow-scrolling: touch; padding-block: 12px 32px; margin-block: -12px -32px; width: calc(100% + var(--pi-gutter) * 2); margin-inline: calc(var(--pi-gutter) * -1); padding-inline: var(--pi-gutter); }
  .pi-case-studies__grid::-webkit-scrollbar { display: none; }
  .pi-case-card { flex: 0 0 320px; width: 320px; scroll-snap-align: start; padding: 24px; }
  .pi-case-card__stats { flex-direction: column; gap: 16px; }
  .pi-case-studies__dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
}

/* Same cramped-row pattern as the four-card grid above, just three cards
   instead of four - at 1024 "~5,000" (a stat value) didn't fit its
   slot and sat under the neighboring stat's digit. Two-up (one card
   wraps alone) in the same 1024-1279.98 band. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-case-studies__grid { flex-wrap: wrap; }
  .pi-case-studies__grid .pi-case-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
}

/* ---- Home / Resources (21:864 desktop, 247:10724 mobile) ---- */
.pi-resources { display: flex; flex-direction: column; align-items: flex-start; padding-block: 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-resources__band { position: relative; display: flex; align-items: center; gap: 72px; width: 100%; box-sizing: border-box; padding: 64px; border-radius: 28px; background: var(--pi-bg-surface); border: 1px solid var(--pi-border-subtle); overflow: hidden; }
.pi-resources__glow { position: absolute; left: -421px; top: -521px; width: 900px; height: 900px; max-width: none; z-index: 0; pointer-events: none; }

.pi-resources__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; flex: 1; min-width: 0; }
.pi-resources__header { display: flex; flex-direction: column; gap: 20px; }
.pi-resources__eyebrow { margin: 0; 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-resources__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-resources__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-resources__lede { margin: 0; max-width: 68ch; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-body); }

.pi-resources__index { position: relative; z-index: 1; flex-shrink: 0; width: 600px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 20px; background: var(--pi-bg-page); border: 1px solid var(--pi-border-subtle); overflow: hidden; }
.pi-resources__index-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--pi-border-subtle); }
.pi-resources__index-header p { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pi-resources__index-header p:first-child { color: var(--pi-text-secondary); }
.pi-resources__index-header p:last-child { color: var(--pi-text-muted); }
.pi-resources-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--pi-border-subtle); text-decoration: none; overflow: hidden; }
.pi-resources-row:last-child { border-bottom: 0; }
.pi-resources-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pi-bg-raised); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--pi-ease-out); }
.pi-resources-row:focus-visible::before { transform: scaleX(1); }
.pi-resources-row__count { flex-shrink: 0; width: 48px; margin: 0; font-family: var(--pi-font-mono); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: 0.04em; color: var(--pi-text-secondary); transition: color var(--pi-motion-fast) var(--pi-ease-out); }
.pi-resources-row:focus-visible .pi-resources-row__count { background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-resources-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pi-resources-row__title-row { display: flex; align-items: flex-start; gap: 10px; }
.pi-resources-row__title { margin: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--pi-text-primary); white-space: nowrap; }
.pi-resources-row__description { margin: 0; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-muted); }
/* Same muted/orange swap as the row's own arrow, so every row's
   icon matches at rest (previously the one-pagers row's icon-file-
   text.svg was hardcoded orange while the other three rows were
   muted) and turns orange on hover/focus like the rest of the row. */
.pi-resources-row__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 5px; }
.pi-resources-row__icon-muted, .pi-resources-row__icon-orange { position: absolute; inset: 0; transition: opacity var(--pi-motion-fast) var(--pi-ease-out); }
.pi-resources-row__icon-orange { opacity: 0; }
.pi-resources-row:focus-visible .pi-resources-row__icon-muted { opacity: 0; }
.pi-resources-row:focus-visible .pi-resources-row__icon-orange { opacity: 1; }
.pi-resources-row__arrow { position: relative; flex-shrink: 0; width: 18px; height: 18px; transition: transform var(--pi-motion-fast) var(--pi-ease-out); }
.pi-resources-row:focus-visible .pi-resources-row__arrow { transform: translateX(6px); }
.pi-resources-row__arrow-muted, .pi-resources-row__arrow-orange { position: absolute; inset: 0; transition: opacity var(--pi-motion-fast) var(--pi-ease-out); }
.pi-resources-row__arrow-orange { opacity: 0; }
.pi-resources-row:focus-visible .pi-resources-row__arrow-muted { opacity: 0; }
.pi-resources-row:focus-visible .pi-resources-row__arrow-orange { opacity: 1; }
@media (hover: hover) {
  .pi-resources-row:hover::before { transform: scaleX(1); }
  .pi-resources-row:hover .pi-resources-row__count { background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pi-resources-row:hover .pi-resources-row__icon-muted { opacity: 0; }
  .pi-resources-row:hover .pi-resources-row__icon-orange { opacity: 1; }
  .pi-resources-row:hover .pi-resources-row__arrow { transform: translateX(6px); }
  .pi-resources-row:hover .pi-resources-row__arrow-muted { opacity: 0; }
  .pi-resources-row:hover .pi-resources-row__arrow-orange { opacity: 1; }
}
/* Press state on touch, matching every other card's own
   touch-only :active recipe. */
@media (hover: none) {
  .pi-resources-row:active { transition: transform 160ms var(--pi-ease-out); transform: scale(0.98); }
}

/* 1024-1279.98px: the fixed 600px index card plus 72px gap and the
   band's own 64px padding leaves the copy column (46px headline) only
   ~84px at 1024px. Shrink the band's padding/gap and the index card
   itself, and let row titles wrap instead of forcing nowrap. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-resources__band { gap: 40px; padding: 40px; }
  .pi-resources__index { width: 380px; }
  .pi-resources-row { padding: 18px 20px; gap: 14px; }
  .pi-resources-row__title { white-space: normal; }
}

@media (max-width: 1023.98px) {
  .pi-resources { padding: 0; }
  .pi-resources__band { flex-direction: column; align-items: stretch; gap: 32px; padding: 32px 20px; border-radius: 0; border-left: 0; border-right: 0; }
  .pi-resources__headline { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-resources__lede { font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); }
  .pi-resources__index { width: 100%; }
  .pi-resources__index-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pi-resources-row__title { white-space: normal; }
}

/* ---- Tablet: the @media (max-width: 1023.98px) blocks above
   are the phone layout and were never given a 640px step of their
   own, so tablet widths got 20px gutters, full-width buttons and
   swipe carousels instead of the handoff's 40px gutters, natural-width
   buttons and two-up grids. Must come after every max-width:1023.98px
   block above to win the cascade in the 640-1023.98px overlap. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pi-problem { padding: 48px 40px; }
  .pi-hic-teaser { padding: 48px 40px; }
  .pi-proof { padding: 48px 40px; }
  .pi-hiw { padding: 48px 40px; }
  .pi-hero__content { padding: 108px 40px 64px; }
  .pi-modules { padding: 48px 40px 64px; }
  .pi-three-paths { padding: 64px 40px; }
  .pi-nts { padding: 64px 40px; }
  .pi-industries { padding: 64px 40px; }
  .pi-case-studies { padding: 64px 40px; }
  .pi-resources__band { padding: 32px 40px; }

  .pi-live-demo__actions { width: auto; }
  .pi-live-demo__actions .pi-btn { width: auto; }
  .pi-hero__buttons { flex-direction: row; flex-wrap: wrap; width: auto; }
  .pi-hero__buttons .pi-btn { width: auto; }

  .pi-proof__card { flex-direction: row; flex-wrap: wrap; gap: 24px; }
  /* The base rule gave flex: 1 1 0, whose flex-basis: 0
     outranks this tier's own width for sizing the main axis, so all
     four stats split one row evenly instead of wrapping 2 by 2. The
     flex shorthand here (0 0, not just a width) is what actually wins
     against the base rule. */
  .pi-proof__stat { flex: 0 0 calc(50% - 12px); }

  .pi-modules__grid,
  .pi-three-paths__grid,
  .pi-industries__grid,
  .pi-industries__also-grid,
  .pi-case-studies__grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .pi-modules__grid .pi-module-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-three-paths__grid .pi-path-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-industries__grid .pi-industry-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-industries__also-grid .pi-also-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-case-studies__grid .pi-case-card { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); }
  .pi-modules__dots,
  .pi-three-paths__dots,
  .pi-industries__dots,
  .pi-case-studies__dots { display: none; }
}