/**
 * Parts Intelligence: global chrome (Utility Bar, Nav, shared atoms)
 * Figma: Utility Bar 8:35 / 243:9668, Nav/Desktop 209:12839, Nav/Mobile 239:9702
 */

/* --pi-font-body/--pi-font-display/--pi-font-mono (inc/pi-theme-vars.php)
   ask for DM Sans and DM Mono, but neither was ever loaded, so every
   visitor without them installed fell back to Helvetica Neue/Arial and
   the system monospace. DM Sans ships as a single variable font (opsz
   and wght axes), so one @font-face covers 400-700 plus optical sizing;
   DM Mono ships as static 400/500 weights. Files already sit in
   assets/fonts/ from an earlier pass, just never wired up. */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Removed the unused fyrestarter style.min.css, which turned out
   to be the only thing setting a body background - every section that
   doesn't paint its own (most don't; they rely on the page showing
   through) was defaulting to the browser's white. PI's own base.
   That same removal left no body font-family either, so every
   element without its own (most of How It Connects included) rendered
   in the browser's serif default instead of DM Sans. */
body {
  background: var(--pi-bg-page);
  font-family: var(--pi-font-body);
}

/* ---- Shared content container ---- */
/* Caps a section's content at the Figma 1512 frame's own content width
   (1372px) from 1513px and up; backgrounds, shaders, glows, marquees,
   tickers and the footer stay full width since they never adopt this
   class - only the content wrapper inside each section does. Below
   1513px this is a no-op: min() picks the gutter-constrained width,
   identical to what every section already rendered. */
.pi-container {
  width: min(100% - 2 * var(--pi-gutter), var(--pi-content-max));
  margin-inline: auto;
  box-sizing: border-box;
}

/* ---- Hide a loop's reset, never show it ---- */
/* Applied by makeLoop() (pi-motion.js) to a mock's own `cfg.stage`
   element for the ~400ms around each cycle's reset. Opacity only -
   layout never shifts while a loop is mid-reset. */
.pi-loop-fade-out {
  opacity: 0;
  transition: opacity 200ms var(--pi-ease-out);
  pointer-events: none;
}

/* Several PI components use a real <button> for keyboard/aria reasons
   (FAQ rows, fitment search segments, tabs) even though they're meant
   to look like plain content, not a UI control. Browsers - Safari in
   particular - render native button chrome (a grey rounded rect) on
   top of custom background/border unless appearance is reset, which
   is what made several non-interactive-looking sections suddenly look
   like they had stray buttons on them. */
button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* The appearance reset above clears background/
     border chrome but browsers still apply their own UA default text
     color (not just chrome) to a <button> unless something overrides
     it - any descendant that forgets its own explicit color silently
     inherits that default instead of the page's own color, which is
     how .hic-node-title-short rendered black on a dark card. */
  color: inherit;
}

/* Accessibility floor from CLAUDE.md - a visible 2px #FF5000
   keyboard focus ring, 2px offset, site-wide. Any component-level
   outline:none that would block this on a focusable control is a bug,
   not an intentional override. */
:focus-visible {
  outline: 2px solid #FF5000;
  outline-offset: 2px;
}

.pi-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Generic scroll-entrance reveal (pi-motion.js) ----
   Hidden by default (once the early head script in header.php
   has flagged that this visitor actually gets the animation), revealed
   by JS adding .pi-enter--in once ~15% visible - never the other way
   around. Hiding only AFTER an already-visible first paint (the old
   .pi-enter--pre, added by a deferred script) made anything sitting
   near the fold flash: visible, then hidden, then visible again on
   scroll. Reused wherever a section needs a directional fade/slide-in.
   html.pi-enter-ready missing (reduced motion, or JS never ran at all)
   leaves every [data-pi-enter] element in its plain, fully visible,
   un-animated state - never hidden with nothing left to reveal it. */
[data-pi-enter] {
  transition: opacity var(--pi-motion-slow) var(--pi-ease-out), transform var(--pi-motion-slow) var(--pi-ease-out);
  transition-delay: var(--pi-enter-delay, 0ms);
}
html.pi-enter-ready [data-pi-enter][data-pi-enter="left"] { opacity: 0; transform: translateX(-40px); }
html.pi-enter-ready [data-pi-enter][data-pi-enter="right"] { opacity: 0; transform: translateX(40px); }
html.pi-enter-ready [data-pi-enter][data-pi-enter="up"] { opacity: 0; transform: translateY(30px); }
html.pi-enter-ready [data-pi-enter].pi-enter--in { opacity: 1; transform: none; }

/* ---- Webinar lightbox (pi-motion.js) ---- */
.pi-lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.pi-lightbox.is-open { display: flex; }
.pi-lightbox__scrim { position: absolute; inset: 0; background: rgba(11,9,9,0.85); opacity: 0; transition: opacity 200ms var(--pi-ease-out); }
.pi-lightbox.is-open .pi-lightbox__scrim { opacity: 1; }
.pi-lightbox__dialog { position: relative; z-index: 1; width: min(1100px, 100%); aspect-ratio: 16 / 9; transform: scale(0.96); opacity: 0; transition: transform 200ms var(--pi-ease-out), opacity 200ms var(--pi-ease-out); }
.pi-lightbox.is-open .pi-lightbox__dialog { transform: scale(1); opacity: 1; }
.pi-lightbox__frame, .pi-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; }
.pi-lightbox__close { position: absolute; top: -48px; right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); cursor: pointer; }

/* ---- Toast (pi-motion.js's shared toast() helper) ---- */
.pi-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--pi-bg-ui-light);
  color: var(--pi-text-ui-dark);
  font-family: var(--pi-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6);
  transition: opacity var(--pi-motion-base) var(--pi-ease-out), transform var(--pi-motion-base) var(--pi-ease-out);
}
.pi-toast--on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- Logo/PI Lockup (7:15) ---- */
.pi-logo {
  position: relative;
  width: 131px;
  height: 30px;
  flex-shrink: 0;
}
.pi-logo__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Button atom (Primary, Medium) ---- */
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  font-family: var(--pi-font-body);
}
.pi-btn span {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pi-text-primary);
}
.pi-btn--primary {
  background: var(--pi-grad-fyre);
  border: 1px solid rgba(255,255,255,0.9);
}
.pi-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.45);
}
/* A solid #FF5000 border where Figma's Secondary button has the
   Fyre gradient outline. border-image would draw the gradient as a
   straight rectangle (it ignores border-radius, breaking this pill
   shape), so this uses the mask-composite ring technique instead -
   the button's own background stays genuinely transparent (it sits on
   many different page backgrounds site-wide, not one flat surface),
   with only the ring itself painted in the gradient. */
.pi-btn--secondary {
  position: relative;
  background: transparent;
  border: 2.5px solid transparent;
}
.pi-btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: var(--pi-grad-fyre);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pi-btn--white {
  background: var(--pi-text-primary);
}
.pi-btn--white span {
  color: #131313;
}
/* Medium: 13px/18px, tracking 1.3px (Nav's Book a Demo, Find Parts That Fit) */
.pi-btn--medium {
  padding: 15px 28px;
}
.pi-btn--medium span {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 1.3px;
}
/* Large: 15px/18px, tracking 1.5px (Hero's two buttons, desktop only) */
.pi-btn--large {
  padding: 22px 40px;
}
.pi-btn--large span {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 1.5px;
}

/* Hover, press and focus states. Base duration (220ms) covers the
   hover-out transition; each :hover rule below sets 160ms for hover-in,
   since a transition's duration is read from the state being entered. */
.pi-btn {
  transition: transform 220ms var(--pi-ease-out);
}
.pi-btn:active {
  transform: scale(0.98);
}
.pi-btn:focus-visible {
  outline: 2px solid #FF5000;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pi-btn--primary {
    transition: filter 220ms var(--pi-ease-out), box-shadow 220ms var(--pi-ease-out), transform 220ms var(--pi-ease-out);
  }
  .pi-btn--primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 8px 24px -6px rgba(255, 80, 0, 0.55);
    transition-duration: 160ms;
  }
  .pi-btn--ghost,
  .pi-btn--secondary {
    transition: background-color 220ms var(--pi-ease-out), transform 220ms var(--pi-ease-out);
  }
  .pi-btn--ghost:hover,
  .pi-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transition-duration: 160ms;
  }
  .pi-btn--white {
    transition: filter 220ms var(--pi-ease-out), transform 220ms var(--pi-ease-out);
  }
  .pi-btn--white:hover {
    filter: brightness(0.92);
    transition-duration: 160ms;
  }
}

/* Every arrow-button nudges its own arrow on hover and keyboard
   focus, the label stays still. Matched by the arrow icon's own file
   name rather than by a per-component class, since the same two icon
   shapes sit inside dozens of differently-named buttons and links site-
   wide (nav, cta band, faq, resource rows, case cards, industry
   brands...) at different nesting depths - one rule this way reaches
   all of them without a markup change anywhere, present or future. */
img[src*="icon-arrow-right"],
img[src*="icon-arrow-up-right"] {
  transition: transform 200ms var(--pi-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  img[src*="icon-arrow-right"],
  img[src*="icon-arrow-up-right"] {
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:focus-visible img[src*="icon-arrow-right"] {
    transform: translateX(4px);
  }
  a:focus-visible img[src*="icon-arrow-up-right"] {
    transform: translate(2px, -2px);
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover img[src*="icon-arrow-right"] {
      transform: translateX(4px);
    }
    a:hover img[src*="icon-arrow-up-right"] {
      transform: translate(2px, -2px);
    }
  }
}

/* ---- Utility Bar (8:35 / 243:9668) ---- */
.pi-utility-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 44px;
  width: 100%;
  background: var(--pi-bg-sunken);
  text-decoration: none;
}
.pi-utility-bar__tag {
  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-utility-bar__text {
  font-family: var(--pi-font-body);
  font-weight: 400;
  color: var(--pi-text-subtitle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-utility-bar__text--desktop {
  display: none;
  font-size: 14px;
  line-height: 22px;
}
.pi-utility-bar__text--mobile {
  display: block;
  font-size: 12px;
  line-height: 22px;
}
.pi-utility-bar__watch {
  display: none;
  flex-shrink: 0;
  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;
  background: var(--pi-grad-fyre);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.pi-utility-bar__arrow {
  flex-shrink: 0;
  width: 14px; height: 14px;
}
/* "The fitment webinar is on demand" needs 190px, but only gets
   173px at 320 and 183px at 330 once the tag and the arrow (14px plus
   its own 14px gap) take their share, so it ellipsis-truncated mid-
   word. Hiding the arrow frees about 28px, enough for the full
   sentence to fit on one line at the narrowest phones. */
@media (max-width: 339.98px) {
  .pi-utility-bar__arrow { display: none; }
}

/* ---- Nav (209:12839 desktop, 239:9702 mobile) ----
   Fixed per PI Motion Demo: pi-motion.js sets `top` every scroll
   frame to (utility bar height - scrollY), clamped at 0, so the pill
   scrolls with the page until the Utility Bar fully exits view, then
   locks to the top edge. `--pi-nav-compact` shrinks that offset
   further and darkens the pill; `--pi-nav-hidden` slides it off-screen
   on scroll-down past the hero and back on scroll-up. Heroes no longer
   need a negative margin-top to tuck under it, since Nav is out of
   document flow entirely now. */
.pi-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 44px;
  z-index: 50;
  transition: transform var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav--hidden { transform: translateY(-150%); }
.pi-nav__bar,
.pi-nav--mobile {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(21,20,19,0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--pi-motion-base) var(--pi-ease-out), border-color var(--pi-motion-base) var(--pi-ease-out), box-shadow var(--pi-motion-base) var(--pi-ease-out), border-radius var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav__bar {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
}
.pi-nav--compact .pi-nav__bar,
.pi-nav--compact.pi-nav--mobile {
  background: rgba(21,20,19,0.88);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7);
}

.pi-nav--desktop {
  display: flex;
  align-items: center;
  width: 100%;
  height: 96px;
  padding-block: 16px;
  /* Past 1512px, cap the bar so its left edge keeps the logo
     (28px further in, via .pi-nav__bar's own padding-left) lined up
     with the capped content's left edge. Below that the 56px side
     padding this nav has always used is untouched. */
  padding-left: max(56px, (100% - var(--pi-content-max)) / 2 - 28px);
  padding-right: max(56px, (100% - var(--pi-content-max)) / 2);
  box-sizing: border-box;
}
.pi-nav--desktop .pi-nav__bar {
  height: 64px;
  padding-left: 28px;
  padding-right: 7px;
}
/* Keep the bar at 64px on scroll - only the fill and shadow
   (above) strengthen. Figma's 64->56px compact height was flagged
   as looking off. */
.pi-nav--desktop .pi-nav__logo {
  display: flex;
  flex-shrink: 0;
}
.pi-nav__links {
  display: flex;
  flex-shrink: 0;
  margin-inline: auto;
}
.pi-nav__links-list {
  display: flex;
  gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pi-nav__links-list li {
  display: flex;
}
.pi-nav__links-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  text-decoration: none;
}
.pi-nav__link-label {
  font-family: var(--pi-font-body);
  font-weight: 900;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: var(--pi-label-nav-tracking);
  text-transform: uppercase;
  color: var(--pi-text-primary);
  white-space: nowrap;
}
.pi-nav__link-underline {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--pi-grad-fyre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav__links-list a[aria-current="page"] .pi-nav__link-underline {
  transform: scaleX(1);
}
@media (hover: hover) {
  .pi-nav__links-list a:hover .pi-nav__link-underline {
    transform: scaleX(1);
  }
}
.pi-nav__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}
.pi-nav__fyresite-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  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;
}
.pi-nav__fyresite-link img {
  width: 14px; height: 14px;
}

.pi-nav--mobile {
  display: none;
}

/* Sits under the nav panel (z-index 50) but above everything
   else, so a tap "outside the panel" lands on the scrim itself rather
   than passing through to whatever's underneath in the page. */
.pi-nav-mobile__scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  /* Figma 293:17240 darkens the scrim to .55 and blurs the page
     behind it - it rendered as a flat .4 tint with no blur. */
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav-mobile__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .pi-nav-mobile__scrim { transition: none; }
}

/* The desktop nav's gaps are exact at 1512 but overflow between 1024
   and ~1279 (no Figma frame covers this range) - tighten fluidly so it
   holds up through the Build System's required 1024 check without
   changing anything at 1280 and up. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-nav--desktop { padding-inline: 24px; }
  .pi-nav--desktop .pi-nav__bar { padding-left: 16px; }
  .pi-nav__links-list { gap: 20px; }
  .pi-nav__actions { gap: 16px; }
  .pi-nav__fyresite-link { display: none; }
}

/* ---- Breakpoint switch: 1024px, per the Build System rule ---- */
@media (max-width: 1023.98px) {
  .pi-nav--desktop { display: none; }
  .pi-nav--mobile { display: flex; }
  .pi-utility-bar__text--desktop { display: none; }
  .pi-utility-bar__text--mobile { display: block; }
  .pi-utility-bar__watch { display: none; }
}
@media (min-width: 1024px) {
  .pi-utility-bar__text--desktop { display: block; }
  .pi-utility-bar__text--mobile { display: none; }
  .pi-utility-bar__watch { display: block; }
}

.pi-nav--mobile {
  /* Inset from both edges, like the closed pill in Figma -
     overrides .pi-nav's shared left:0/right:0 (same specificity,
     later in the file). The old 12px horizontal half of this
     element's own padding is gone since the inset now comes from
     here instead; the 10px vertical half stays. */
  left: 12px;
  right: 12px;
  flex-direction: column;
  width: auto;
  padding: 10px 0;
  box-sizing: border-box;
  overflow: hidden;
  /* Half of the 72px closed bar (52px bar + 2 x 10px padding), so this
     tweens smoothly to 24px open instead of snapping near the end of
     a 999px -> 30px transition. */
  border-radius: 36px;
}
/* The panel read as translucent red glass because it kept the
   collapsed pill's 0.5 opacity, letting whatever hero gradient sits
   behind it bleed through - Figma wants it nearly opaque once open. */
.pi-nav--mobile.pi-nav-mobile--open {
  border-radius: 24px;
  background: rgba(21,20,19,0.94);
  border-color: rgba(255,255,255,0.12);
  /* Figma 293:17241 has the open panel at a 20px background
     blur, not the collapsed pill's 10px. */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0px 24px 50px -10px rgba(0,0,0,0.6);
}
/* Figma's open panel header shows only the logo and the close button -
   hide the Book a Demo button that otherwise lives in the same bar,
   rather than building a second header the panel doesn't need. */
.pi-nav-mobile--open .pi-nav__mobile-actions .pi-btn {
  display: none;
}
.pi-nav--mobile .pi-nav__bar {
  flex-shrink: 0;
  height: 52px;
  padding-left: 18px;
  padding-right: 6px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}
.pi-nav--mobile .pi-nav__logo {
  display: flex;
  flex-shrink: 0;
}
.pi-nav--mobile .pi-logo {
  transform: scale(0.82);
  transform-origin: left center;
}
.pi-nav__mobile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.pi-nav__mobile-actions .pi-btn {
  padding: 12px 14px;
  border: 0;
}
.pi-nav__mobile-actions .pi-btn span {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.96px;
}
/* Logo + "Book a demo" + the menu button don't all fit under
   330px (the pill's own overflow:hidden clips the menu button instead
   of wrapping or shrinking anything) - drop the header's Book a Demo
   button at the narrowest supported width (320 is this project's
   declared floor) and rely on the one already inside the open mobile
   menu (.pi-nav-mobile__demo-btn) instead. Unaffected from 360 up. */
@media (max-width: 329.98px) {
  .pi-nav__mobile-actions .pi-btn { display: none; }
}
.pi-nav__menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
}
.pi-nav__menu-icon {
  position: absolute;
  width: 18px; height: 18px;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: opacity var(--pi-motion-base) var(--pi-ease-out), transform var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav__menu-icon--close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.pi-nav-mobile--open .pi-nav__menu-icon--open { opacity: 0; transform: rotate(45deg) scale(0.7); }
.pi-nav-mobile--open .pi-nav__menu-icon--close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Mobile menu panel: grid-rows accordion trick, same as the FAQ
   accordion, so no measured-height JS is needed. Links rise in with a
   staggered delay as the panel opens (PI Motion Demo). */
.pi-nav-mobile__menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pi-motion-base) var(--pi-ease-out);
}
.pi-nav-mobile--open .pi-nav-mobile__menu {
  grid-template-rows: 1fr;
}
.pi-nav-mobile__menu-inner {
  overflow: hidden;
}
.pi-nav-mobile__links {
  list-style: none;
  margin: 0;
  padding: 4px 18px 10px;
  display: grid;
  gap: 2px;
}
.pi-nav-mobile__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--pi-text-primary);
  text-decoration: none;
  font-family: var(--pi-font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(8px);
  /* Starts 120ms after the panel's own height transition (260ms,
     .pi-nav-mobile__menu below), each a further 40ms after the last -
     was the panel's own 600ms slow-motion speed with no lead-in, so
     links kept fading in long after the panel finished opening. */
  transition: opacity var(--pi-motion-base) var(--pi-ease-out), transform var(--pi-motion-base) var(--pi-ease-out);
  transition-delay: 120ms;
}
.pi-nav-mobile__links a img { flex-shrink: 0; width: 18px; height: 18px; }
.pi-nav-mobile--open .pi-nav-mobile__links a {
  opacity: 1;
  transform: none;
}
.pi-nav-mobile__links li:nth-child(2) a { transition-delay: 160ms; }
.pi-nav-mobile__links li:nth-child(3) a { transition-delay: 200ms; }
.pi-nav-mobile__links li:nth-child(4) a { transition-delay: 240ms; }
.pi-nav-mobile__links li:nth-child(5) a { transition-delay: 280ms; }
.pi-nav-mobile__bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 18px 12px 10px 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pi-motion-base) var(--pi-ease-out), transform var(--pi-motion-base) var(--pi-ease-out);
  transition-delay: 320ms;
}
.pi-nav-mobile--open .pi-nav-mobile__bottom { opacity: 1; transform: none; }
.pi-nav-mobile__sm {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  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);
}
.pi-nav-mobile__sm img { width: 14px; height: 14px; }
.pi-nav-mobile__demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 17px 24px;
  border-radius: 999px;
  background: var(--pi-grad-fyre);
  text-decoration: none;
}
.pi-nav-mobile__demo-btn span {
  font-family: var(--pi-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pi-text-primary);
}
.pi-nav-mobile__demo-btn img { width: 14px; height: 14px; }

/* ---- Shared product UI mockups (reused across pages: Home How It
   Works/Native to Shopify, Platform Hero, etc.) ---- */
.pi-ui-mock { background: var(--pi-bg-ui-light); border-radius: 16px; box-shadow: 0 27px 68px rgba(0,0,0,0.45); box-sizing: border-box; }
.pi-ui-mock__soon { font-family: var(--pi-font-ui); font-weight: 500; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark); background: rgba(255,181,71,0.25); border-radius: 4px; padding: 2px 7px; }

/* UI/Module Switchboard (dark) */
.pi-ui-switchboard { max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 16px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.pi-ui-switchboard__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 10px; }
/* At the new 89%-wide phone tier the title had no
   room to shrink and ran straight into the on-count - min-width: 0
   lets this flex child shrink below its content's natural width, and
   letting the title wrap (rather than truncate or overflow) keeps
   both pieces readable instead of overlapping. */
.pi-ui-switchboard__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pi-ui-switchboard__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 17px; color: var(--pi-text-primary); white-space: normal; }
.pi-ui-switchboard__on-count { font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-secondary); white-space: nowrap; flex-shrink: 0; }
.pi-ui-switchboard__row { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; background: var(--pi-bg-raised); margin-bottom: 6px; }
.pi-ui-switchboard__row:last-child { margin-bottom: 0; }
.pi-ui-switchboard__row--featured { border: 1px solid var(--pi-accent-orange); }
.pi-ui-switchboard__row-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.pi-ui-switchboard__row-top p { margin: 0; flex: 1; min-width: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 14px; color: var(--pi-text-primary); }
.pi-ui-switchboard__row-top p.is-muted { color: var(--pi-text-body); }
.pi-ui-switchboard__toggle { flex-shrink: 0; }
.pi-ui-switchboard__new-tag { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; background: rgba(255,80,0,0.14); font-family: var(--pi-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--pi-accent-orange-text); }
.pi-ui-switchboard__soon, .pi-roadmap-item__tag, .pi-tag-warning { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,181,71,0.12); border: 1px solid rgba(255,181,71,0.45); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pi-warning); white-space: nowrap; }
.pi-ui-switchboard__chat { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px; border-radius: 8px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.06); }
.pi-ui-switchboard__chat--js { opacity: 0; transform: translateY(8px); transition: opacity var(--pi-motion-slow) var(--pi-ease-out), transform var(--pi-motion-slow) var(--pi-ease-out); }
.pi-ui-switchboard__chat--js.is-revealed { opacity: 1; transform: none; }
.pi-ui-switchboard__chat-row-user { display: flex; justify-content: flex-end; width: 100%; }
.pi-ui-switchboard__chat-bubble-user { padding: 8px 12px; border-radius: 14px; background: var(--pi-text-ui-dark); font-family: var(--pi-font-ui); font-size: 12px; line-height: 1.4; color: var(--pi-text-primary); white-space: nowrap; }
.pi-ui-switchboard__chat-bubble-assistant { width: 300px; max-width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; background: var(--pi-bg-ui-light-2); font-family: var(--pi-font-ui); font-size: 12px; line-height: 1.4; color: var(--pi-text-ui-dark); }
.pi-ui-switchboard__chat-fit { display: flex; align-items: center; gap: 6px; }
.pi-ui-switchboard__chat-fit span { font-family: var(--pi-font-body); font-weight: 500; font-size: 11px; color: var(--pi-text-muted); }
/* The "+N more modules" row a mobile_cap caller can render in
   place of the rows past its cap. Hidden by default; a caller that
   passes a cap also shows it under its own mobile breakpoint. */
.pi-ui-switchboard__more-row { display: none; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; background: var(--pi-bg-raised); font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-secondary); }
@media (max-width: 1023.98px) {
  .pi-ui-switchboard__title p { font-size: 15px; }
}

/* UI/My Garage (light) */
.pi-ui-garage { width: 380px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.pi-ui-garage__header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-ui-garage__title { display: flex; align-items: center; gap: 10px; }
.pi-ui-garage__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 17px; color: var(--pi-text-ui-dark); white-space: nowrap; }
.pi-ui-garage__count { font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-ui-dark-2); white-space: nowrap; }
.pi-ui-garage__vehicle { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--pi-border-ui-light); }
.pi-ui-garage__vehicle.is-active { background: var(--pi-bg-ui-light-2); border: 1.5px solid var(--pi-accent-orange); }
.pi-ui-garage__vehicle-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px; background: var(--pi-bg-ui-light-2); }
.pi-ui-garage__vehicle.is-active .pi-ui-garage__vehicle-icon { background: var(--pi-grad-fyre); }
.pi-ui-garage__vehicle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; white-space: nowrap; }
/* min-width:0 lets this shrink, but nowrap alone just overflows
   instead of stopping - truncate each line instead of running under
   the badge/button next to it (B2B's garage mock at every width,
   Platform's at 360/390). */
.pi-ui-garage__vehicle-text strong,
.pi-ui-garage__vehicle-text em { overflow: hidden; text-overflow: ellipsis; }
.pi-ui-garage__vehicle-text strong { font-family: var(--pi-font-ui); font-weight: 700; color: var(--pi-text-ui-dark); }
.pi-ui-garage__vehicle-text em { font-family: var(--pi-font-ui); font-style: normal; color: var(--pi-text-ui-dark-2); }
.pi-ui-garage__badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--pi-success-bg); font-family: var(--pi-font-ui); font-weight: 700; font-size: 11px; color: var(--pi-success-deep); white-space: nowrap; }
.pi-ui-garage__add { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-ui-garage__add-vehicle, .pi-ui-garage__add-vin { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-ui-dark-2); white-space: nowrap; }
.pi-ui-garage__add-vehicle, .pi-ui-garage__add-vin--live { color: var(--pi-text-ui-dark); font-weight: 700; }
/* At the narrowest card widths (Platform hero's mock at 320),
   "Add a vehicle" and "Add by VIN" side by side ran "Add by VIN" past
   the card and the screen edge by 5px - let the row wrap instead of
   forcing both onto one line. */
@media (max-width: 359.98px) {
  .pi-ui-garage__add { flex-wrap: wrap; row-gap: 8px; }
}

/* UI/Vehicle Selector (light) - desktop size by default; .pi-ui-mock--mobile scales it down */
.pi-ui-vehicle-selector { width: 560px; max-width: 100%; box-sizing: border-box; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.pi-ui-vehicle-selector__header { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-vehicle-selector__title { display: flex; align-items: center; gap: 10px; }
.pi-ui-vehicle-selector__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 18px; line-height: 22px; color: var(--pi-text-ui-dark); }
.pi-ui-vehicle-selector__garage { display: flex; align-items: center; gap: 6px; }
.pi-ui-vehicle-selector__garage p { margin: 0; font-family: var(--pi-font-ui); font-size: 13px; line-height: 18px; color: var(--pi-text-ui-dark-2); }
.pi-ui-vehicle-selector__tabs { display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: var(--pi-bg-ui-light-2); box-sizing: border-box; }
/* flex-shrink:0 kept every tab at its natural content width
   regardless of available space - fine everywhere this mock is wide
   enough, but at 320 (the project's declared floor) three tabs ran
   past the card edge instead of sharing the narrower space. */
.pi-ui-vehicle-selector__tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 7px; box-sizing: border-box; }
.pi-ui-vehicle-selector__tab p { margin: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--pi-text-ui-dark-2); }
.pi-ui-vehicle-selector__tab.is-active { background: var(--pi-bg-ui-light); box-shadow: 0 1px 1.5px rgba(0,0,0,0.08); }
.pi-ui-vehicle-selector__tab.is-active p { font-weight: 600; color: var(--pi-text-ui-dark); }
/* Panels swap with a plain display toggle, same convention
   as Home's How It Works stage panels - no crossfade to invent. */
/* All three tabs stack in the same grid cell so the
   card is always as tall as its tallest tab, instead of resizing when
   the loop switches tabs. Inactive panels stay display:flex (not none)
   so they still count toward the grid row's height - only visibility
   and pointer-events hide them. */
.pi-ui-vehicle-selector__panels { display: grid; }
.pi-ui-vehicle-selector__panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; visibility: hidden; opacity: 0; pointer-events: none; }
.pi-ui-vehicle-selector__panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.pi-ui-vehicle-selector__selects { display: flex; gap: 10px; }
.pi-ui-vehicle-selector__select { display: flex; flex-direction: column; gap: 6px; flex: 1 0 0; min-width: 0; }
.pi-ui-vehicle-selector__select--year { flex: 0 0 88px; }
.pi-ui-vehicle-selector__select--engine { flex: 0 0 150px; }
.pi-ui-vehicle-selector__select-label { margin: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-vehicle-selector__select-box { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid var(--pi-border-ui-light); border-radius: 8px; background: var(--pi-bg-ui-light); box-sizing: border-box; }
.pi-ui-vehicle-selector__select-box.is-selected { border: 1.5px solid var(--pi-accent-orange); }
.pi-ui-vehicle-selector__select-box.is-open { border-color: var(--pi-accent-orange); box-shadow: 0 0 0 3px rgba(255,80,0,0.14); }
.pi-ui-vehicle-selector__select-box p { margin: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; line-height: 18px; color: var(--pi-text-ui-dark); white-space: nowrap; }
/* The dropdown-pick animation: a popover of options opens under the
   field, steps through a highlight, lands on the real value. */
.pi-ui-vehicle-selector__ddm { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 6; display: grid; gap: 2px; padding: 4px; border-radius: 12px; background: var(--pi-bg-ui-light); box-shadow: 0 18px 40px -8px rgba(0,0,0,0.35), 0 0 0 1px var(--pi-border-ui-light); }
.pi-ui-vehicle-selector__ddm div { padding: 8px 10px; border-radius: 8px; font-family: var(--pi-font-ui); font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--pi-text-ui-dark); white-space: nowrap; transition: background-color 90ms linear; }
.pi-ui-vehicle-selector__ddm div.is-hl { background: var(--pi-bg-ui-light-2); }
.pi-ui-vehicle-selector__ddm div.is-picked { background: rgba(255,80,0,0.12); color: var(--pi-accent-orange-text); font-weight: 600; }
.pi-ui-vehicle-selector__field { display: flex; flex-direction: column; gap: 6px; }
.pi-ui-vehicle-selector__field-label { margin: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-vehicle-selector__field-box { display: flex; align-items: center; padding: 11px 12px; border: 1px solid var(--pi-border-ui-light); border-radius: 8px; background: var(--pi-bg-ui-light); box-sizing: border-box; }
.pi-ui-vehicle-selector__field-box.is-active { border-color: var(--pi-accent-orange); box-shadow: 0 0 0 3px rgba(255,80,0,0.14); }
/* An empty text node has no line box to measure, so this field
   (and with it the whole card, via the grid-stacked panels above)
   grew taller the moment the loop typed a value into it. line-height
   gives it a strut that reserves the same height whether empty or
   filled. */
.pi-ui-vehicle-selector__field-value { min-height: 18px; line-height: 18px; font-family: var(--pi-font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--pi-text-ui-dark); white-space: nowrap; }
.pi-ui-vehicle-selector__caret { display: none; width: 2px; height: 16px; margin-left: 2px; background: var(--pi-accent-orange); }
.pi-ui-vehicle-selector__field-box.is-active .pi-ui-vehicle-selector__caret { display: block; animation: pi-ui-caret-blink 1s steps(1) infinite; }
@keyframes pi-ui-caret-blink { 50% { opacity: 0; } }
.pi-ui-vehicle-selector__field-box.is-shimmer { background: linear-gradient(90deg, var(--pi-bg-ui-light), rgba(255,80,0,0.18), var(--pi-bg-ui-light)); background-size: 200% 100%; animation: pi-ui-shimmer 600ms linear 1; }
@keyframes pi-ui-shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.pi-ui-vehicle-selector__match { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--pi-success-bg); font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--pi-success-deep); opacity: 0; transform: translateY(4px); transition: opacity 0.26s var(--pi-ease-out), transform 0.26s var(--pi-ease-out); }
.pi-ui-vehicle-selector__match.is-in { opacity: 1; transform: none; }
.pi-ui-vehicle-selector__match small { font-weight: 400; font-size: 12px; opacity: 0.85; }
.pi-ui-vehicle-selector__submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 20px; border: 0; border-radius: 8px; background: var(--pi-grad-fyre); font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; line-height: 18px; color: var(--pi-text-primary); cursor: pointer; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease; }
.pi-ui-vehicle-selector__submit.is-empty { background: var(--pi-bg-ui-light-2); color: var(--pi-text-ui-dark-2); }
.pi-ui-vehicle-selector__submit.is-pressed { transform: scale(0.97); }
/* A mask icon in currentColor instead of a white <img> - it was
   nearly invisible on the empty state's light grey button, since that
   state's icon never changed with the text color the way the label
   already does. This way both states (and any future one) track the
   button's own color with no separate swap rule. */
.pi-ui-vehicle-selector__submit-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('../images/global/icon-search-ui.svg') no-repeat center / contain;
  mask: url('../images/global/icon-search-ui.svg') no-repeat center / contain;
}

.pi-ui-mock--mobile.pi-ui-vehicle-selector { width: 318px; padding: 18px 16px; gap: 14px; }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__title p { font-size: 15px; }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__tab p { font-size: 12px; }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__selects { flex-wrap: wrap; gap: 11px 9px; }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__select { flex: 0 0 calc(50% - 5px); }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__select-box p { font-size: 12px; }
.pi-ui-mock--mobile .pi-ui-vehicle-selector__submit { font-size: 12px; padding: 14px 18px; }

/* UI/Search Results (light) - mobile size (stacked, pill categories) by default */
.pi-ui-search-results { width: 318px; display: flex; flex-direction: column; overflow: hidden; }
.pi-ui-search-results__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--pi-border-ui-light); }
.pi-ui-search-results__query { margin: 0; flex: 1 0 0; min-width: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 16px; color: var(--pi-text-ui-dark); }
.pi-ui-search-results__vehicle-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--pi-bg-ui-light-2); font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; color: var(--pi-text-ui-dark); white-space: nowrap; }
/* An illustration, not a control - overflow-x:auto let it be
   dragged like a real filter row. mask-image fades the last visible
   chip instead of hard-cropping it, so it still reads as "more chips
   exist, off to the side" without inviting a swipe nothing will do. */
.pi-ui-search-results__cats { display: flex; gap: 8px; padding: 12px 0 12px 16px; background: var(--pi-bg-ui-light-2); overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pi-ui-search-results__cat { flex-shrink: 0; padding: 6px 11px; border-radius: 99px; background: white; border: 1px solid #e0e0e0; font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-ui-dark); white-space: nowrap; pointer-events: none; }
.pi-ui-search-results__cat em { font-style: normal; color: var(--pi-text-ui-dark-2); margin-left: 6px; }
.pi-ui-search-results__list { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.pi-ui-search-results__list-label { margin: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-search-results__item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.pi-ui-search-results__thumb { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f4f4f2; }
.pi-ui-search-results__thumb img:first-child { width: 100%; height: 100%; object-fit: cover; }
.pi-ui-search-results__thumb-icon { display: none; }
.pi-ui-search-results__item-text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pi-ui-search-results__item-title { margin: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; line-height: 18px; color: var(--pi-text-ui-dark); }
.pi-ui-search-results__item-fit { margin: 0; display: flex; align-items: center; gap: 4px; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-success-deep); }
.pi-ui-search-results__item-price { margin: 0; flex-shrink: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; color: var(--pi-text-ui-dark); }

/* UI/Search Results, Desktop size: sidebar list beside the results column */
.pi-ui-search-results--desktop { width: 560px; }
.pi-ui-search-results--desktop .pi-ui-search-results__bar { padding: 16px 20px; }
.pi-ui-search-results--desktop .pi-ui-search-results__query { font-size: 16px; letter-spacing: -0.02em; }
.pi-ui-search-results__body { display: flex; align-items: stretch; width: 100%; }
.pi-ui-search-results__sidebar { flex-shrink: 0; width: 190px; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--pi-bg-ui-light-2); }
.pi-ui-search-results__sidebar-label { margin: 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-search-results__sidebar-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--pi-font-ui); font-size: 13px; line-height: 18px; }
.pi-ui-search-results__sidebar-row p:first-child { margin: 0; color: var(--pi-text-ui-dark); }
.pi-ui-search-results__sidebar-row p:last-child { margin: 0; color: var(--pi-text-ui-dark-2); }
.pi-ui-search-results--desktop .pi-ui-search-results__list { flex: 1; min-width: 0; padding: 14px; gap: 0; }
.pi-ui-search-results--desktop .pi-ui-search-results__thumb { width: 44px; height: 44px; }

/* UI/Product Page (light) - mobile size (vertical stack) by default;
   --desktop reflows image+info into a row (Platform Pillar 02). */
.pi-ui-product-page { width: 318px; max-width: 100%; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pi-ui-product-page__image { width: 100%; height: 120px; border-radius: 12px; overflow: hidden; background: var(--pi-bg-ui-light-2); flex-shrink: 0; }
.pi-ui-product-page__image img { width: 100%; height: 100%; object-fit: cover; }
.pi-ui-product-page__info { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pi-ui-product-page__eyebrow { margin: 4px 0 0; font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-product-page__title { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--pi-text-ui-dark); }
.pi-ui-product-page__price { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 18px; color: var(--pi-text-ui-dark); }
.pi-ui-product-page__core { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--pi-font-ui); font-size: 13px; color: var(--pi-text-ui-dark-2); }
.pi-ui-product-page__cart { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border: 0; border-radius: 8px; background: var(--pi-text-ui-dark); color: white; font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; cursor: pointer; }
.pi-ui-product-page__compat { margin: 0; font-family: var(--pi-font-ui); font-size: 13px; }
.pi-ui-product-page__compat strong { color: var(--pi-text-ui-dark); }
/* var(--pi-accent-orange) (#FF5000) on this mock's white
   background only hits 3.28:1 at 13px - #C2410C (5.18:1) passes.
   Scoped here, not on the shared variable, since --pi-accent-orange is
   also the dark-theme accent used everywhere else at a passing ratio
   against the dark background. */
.pi-ui-product-page__compat span { color: #C2410C; margin-left: 6px; }
/* "Fits 148 vehicles" alone is wide enough that "View buyer's
   guide" has no room left on the same line below 360, leaving "guide"
   wrapping alone to crowd the line under it. Stack the two instead of
   letting inline flow pick an awkward wrap point. */
@media (max-width: 359.98px) {
  .pi-ui-product-page__compat { display: flex; flex-direction: column; gap: 4px; }
  .pi-ui-product-page__compat span { margin-left: 0; }
}

.pi-ui-product-page--desktop { width: 556px; flex-direction: row; gap: 21px; padding: 21px; }
.pi-ui-product-page--desktop .pi-ui-product-page__image { width: 206px; height: 233px; flex-shrink: 0; }
.pi-ui-product-page--desktop .pi-ui-product-page__info { flex: 1; min-width: 0; }

/* Shared "Fits your vehicle" badge (vehicle selector, product mocks, etc.) */
.pi-fit-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 8px; background: var(--pi-success-bg); font-family: var(--pi-font-ui); font-weight: 700; font-size: 13px; line-height: 18px; color: var(--pi-success-deep); white-space: nowrap; }
.pi-fit-badge--sm { padding: 8px 12px 8px 10px; font-size: 12px; }

/* UI/Cart (light) */
.pi-ui-cart { width: 372px; max-width: 100%; box-sizing: border-box; padding: 19px; display: flex; flex-direction: column; gap: 12px; }
.pi-ui-cart__header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-ui-cart__title { display: flex; align-items: center; gap: 9px; }
.pi-ui-cart__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 15px; color: var(--pi-text-ui-dark); }
.pi-ui-cart__count { font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark-2); }
.pi-ui-cart__line { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--pi-border-ui-light); }
.pi-ui-cart__thumb { flex-shrink: 0; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--pi-bg-ui-light-2); }
.pi-ui-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pi-ui-cart__line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pi-ui-cart__line-text strong { font-family: var(--pi-font-ui); font-weight: 700; font-size: 12px; color: var(--pi-text-ui-dark); }
.pi-ui-cart__line-text em { display: flex; align-items: center; gap: 4px; font-style: normal; font-family: var(--pi-font-ui); font-size: 11px; color: var(--pi-success-deep); }
.pi-ui-cart__line-price { flex-shrink: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 12px; color: var(--pi-text-ui-dark); }
.pi-ui-cart__note { margin: 0; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark-2); }
.pi-ui-cart__checkout { width: 100%; padding: 12px 18px; border: 0; border-radius: 8px; background: var(--pi-grad-fyre); font-family: var(--pi-font-ui); font-weight: 700; font-size: 12px; color: white; cursor: pointer; }

/* UI/Assistant (mini) (light) */
.pi-ui-assistant-mini { width: 262px; max-width: 100%; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 20px rgba(0,0,0,0.45); }
.pi-ui-assistant-mini__header { display: flex; align-items: center; gap: 8px; }
.pi-ui-assistant-mini__header p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-assistant-mini__row-user { display: flex; justify-content: flex-end; width: 100%; }
.pi-ui-assistant-mini__bubble-user { padding: 8px 12px; border-radius: 14px; background: var(--pi-text-ui-dark); font-family: var(--pi-font-ui); font-size: 12px; line-height: 1.4; color: white; white-space: nowrap; }
.pi-ui-assistant-mini__bubble-assistant { margin: 0; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; background: var(--pi-bg-ui-light-2); font-family: var(--pi-font-ui); font-size: 12px; line-height: 1.4; color: var(--pi-text-ui-dark); }
.pi-ui-assistant-mini__input { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 4px 4px 4px 12px; border-radius: 999px; border: 1px solid var(--pi-border-ui-light); background: white; }
/* #9A9A9A on this input's white background only hits 2.81:1 at
   12px - #757575 (4.61:1) passes. */
.pi-ui-assistant-mini__input span:first-child { font-family: var(--pi-font-ui); font-size: 12px; color: #757575; transition: color 160ms var(--pi-ease-out); }
.pi-ui-assistant-mini__send { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: var(--pi-grad-fyre); transition: opacity 160ms var(--pi-ease-out), transform 160ms var(--pi-ease-out); }

/* The chat loop (pi-motion.js) - ask, send, answer, hold,
   repeat. Only used on Platform's Confirm the Fit (desktop + mobile
   slide 3), so no cross-page scoping needed. */
.pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__row-user,
.pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__bubble-assistant {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--pi-ease-out), transform 260ms var(--pi-ease-out);
}
/* These need the same .js-ready ancestor in their
   own selector as the hide rule above, or their 2-class specificity
   loses to that rule's 3-class specificity regardless of is-in being
   present - the chat never actually became visible (is-in toggled
   correctly, opacity stayed pinned at 0). Found via the verify
   script's opacity check, not caught by a class-presence check alone. */
.pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__row-user.is-in,
.pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__bubble-assistant.is-in {
  opacity: 1;
  transform: none;
}
.pi-ui-assistant-mini__input span:first-child.is-typing { color: var(--pi-text-ui-dark); }
.pi-ui-assistant-mini__send.is-ready { opacity: 1; }
.pi-ui-assistant-mini__send.is-pressed { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) {
  .pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__row-user,
  .pi-ui-assistant-mini.js-ready .pi-ui-assistant-mini__bubble-assistant { transition: none; }
}

/* UI/Quick Order (light) - Platform Pillar 03, Industries B2B */
.pi-ui-quick-order { width: 568px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.pi-ui-quick-order__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 16px 19px; }
.pi-ui-quick-order__title { display: flex; align-items: center; gap: 8px; }
.pi-ui-quick-order__title p { margin: 0; font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-quick-order__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-ui-quick-order__chip { padding: 5px 8px; border-radius: 6px; background: var(--pi-bg-ui-light-2); font-family: var(--pi-font-ui); font-weight: 700; font-size: 10px; color: var(--pi-text-ui-dark); white-space: nowrap; }
.pi-ui-quick-order__head-row { display: flex; align-items: center; padding: 8px 19px; background: var(--pi-bg-ui-light-2); }
/* Raised from 9px to the site's 11px label floor, matching
   every other eyebrow/tag/label. */
.pi-ui-quick-order__col { font-family: var(--pi-font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pi-text-ui-dark-2); }
.pi-ui-quick-order__row { display: flex; align-items: center; height: 38px; box-sizing: border-box; padding: 0 19px; border-bottom: 1px solid var(--pi-border-ui-light); }
.pi-ui-quick-order__row .pi-ui-quick-order__col { font-family: var(--pi-font-ui); font-size: 10px; color: var(--pi-text-ui-dark); text-transform: none; letter-spacing: normal; font-weight: 400; }
.pi-ui-quick-order__col--part { flex: 0 0 87px; font-weight: 700 !important; }
.pi-ui-quick-order__col--desc { flex: 0 0 180px; }
.pi-ui-quick-order__col--vehicle { flex: 0 0 126px; }
/* #B8730D on this mock's white background only hits 3.82:1 at
   10-12px - #8A5A00 (5.93:1) passes. */
.pi-ui-quick-order__col--vehicle.is-unselected { color: #8A5A00; }
/* The quick crossfade when My Garage switches vehicle
   (pi-motion.js) - shared by both the desktop column and the mobile
   line below. */
.pi-ui-quick-order__vehicle-name { display: inline-block; transition: opacity 150ms var(--pi-ease-out); }
.pi-ui-quick-order__col--fit { flex: 0 0 40px; display: flex; }
/* A fixed 18px slot for the fit indicator, so the B2B My
   Garage re-check loop (pi-motion.js) can swap the spinner in and out
   for the check/cross icon without changing row height. */
.pi-ui-quick-order__fit-slot { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.pi-ui-quick-order__fit-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); border-top-color: var(--pi-accent-orange); animation: pi-quick-order-spin 0.7s linear infinite; }
@keyframes pi-quick-order-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pi-ui-quick-order__fit-spin { animation: none; }
}
.pi-ui-quick-order__col--qty { flex: 0 0 40px; }
.pi-ui-quick-order__col--price { flex: 0 0 48px; }
.pi-ui-quick-order__qty-box { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--pi-border-ui-light); font-family: var(--pi-font-ui); font-weight: 700; font-size: 10px; color: var(--pi-text-ui-dark); }
.pi-ui-quick-order__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 19px; }
.pi-ui-quick-order__paste { display: flex; align-items: center; gap: 12px; font-family: var(--pi-font-ui); font-size: 10px; white-space: nowrap; }
.pi-ui-quick-order__paste strong { color: var(--pi-text-ui-dark); }
.pi-ui-quick-order__paste span { color: var(--pi-text-ui-dark-2); }
.pi-ui-quick-order__cart { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--pi-text-ui-dark); font-family: var(--pi-font-ui); font-weight: 700; font-size: 10px; color: white; cursor: pointer; white-space: nowrap; transition: transform 120ms var(--pi-ease-out); }
.pi-ui-quick-order__cart.is-pressed { transform: scale(0.97); }

.pi-ui-quick-order__mline { padding: 12px 19px; border-bottom: 1px solid var(--pi-border-ui-light); display: flex; flex-direction: column; gap: 6px; }
.pi-ui-quick-order__mline-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--pi-font-ui); font-size: 13px; }
.pi-ui-quick-order__mline-top strong { color: var(--pi-text-ui-dark); }
.pi-ui-quick-order__mline-price { font-weight: 700; color: var(--pi-text-ui-dark); }
.pi-ui-quick-order__mline-desc { margin: 0; font-family: var(--pi-font-ui); font-size: 12px; color: var(--pi-text-ui-dark-2); }
.pi-ui-quick-order__mline-bottom { display: flex; align-items: center; justify-content: space-between; }
.pi-ui-quick-order__mline-vehicle { position: relative; display: flex; align-items: center; gap: 4px; font-family: var(--pi-font-ui); font-weight: 700; font-size: 12px; color: var(--pi-success-deep); }
/* Same fix as .pi-ui-quick-order__col--vehicle.is-unselected. */
.pi-ui-quick-order__mline-vehicle.is-unselected { color: #8A5A00; }

/* Also Built For card (Home Industries, Industries Fitment Models) */
.pi-also-card { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; gap: 16px; padding: 22px 24px; border-radius: 16px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.06); }
.pi-also-card__icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--pi-bg-raised-2); }
.pi-also-card__text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pi-also-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-also-card__description { margin: 0; font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-body); }

/* Shared carousel dot indicator (Modules, Three Paths, Industries, Case
   Studies, Fitment Setups, etc.) */
/* The previous shared -9px inline margin gave every dot a 24px box on
   a 12px pitch, so neighbors overlapped by 18px - whichever dot comes
   later in the DOM paints on top of that whole overlap. Laying the
   dots out by their own visual size (no overlap) with gap: 0 but 3px
   of padding on each side reproduces Figma's 6px gap (248:10418)
   without any two boxes ever sharing a pixel. These were never meant to
   be tappable, just a position indicator, so pi-motion.js no longer
   wires a click handler and the
   dots are inert (pointer-events: none, aria-hidden) rather than
   fixed-up tap targets - no WCAG target-size trade-off to flag either,
   since a decorative, non-interactive element has no target to size.
   `align-items`/`gap` only, not `display` - each page's own
   `__dots` rule already switches display:none/flex per breakpoint
   (mobile-only everywhere this component is used), and an earlier
   version of this selector set display:flex unconditionally here,
   which outranked every one of those and force-showed dots at every
   width including desktop. */
[class*="__dots"]:has(> .pi-dot) { align-items: center; gap: 0; }
.pi-dot { width: auto; height: 24px; margin: 0; padding: 0 3px; border: 0; background: none; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; }
.pi-dot::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.22); transition: width .25s var(--pi-ease-out, ease-out), background-color .25s; }
.pi-dot.is-active::after { width: 18px; background: var(--pi-grad-fyre); }

/* Shared outline pill tag (Figma "Tag/Outline" component - Home module
   cards, Platform pillar modules/migration band, Industries hero jump
   row, etc.) */
.pi-tag-outline, .pi-module-card__tag, .pi-pillar-module__tag, .pi-industries-hero__tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); 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; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
@media (hover: hover) {
  .pi-industries-hero__tag:hover { border-color: var(--pi-accent-orange); color: var(--pi-text-primary); }
}

/* ---- Global / Migration Band (29:2414 desktop, 250:12036 mobile) ----
   One shared band - was Industries-only (pi-industries.css),
   now also used on Platform right after its launch timeline, so this
   lives here instead of a per-page stylesheet. */
.pi-migration-band { padding-block: 70px 116px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-migration-band__card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; box-sizing: border-box; padding: 60px 64px; border-radius: 24px; border: 1px solid var(--pi-accent-orange); background: var(--pi-bg-surface); overflow: hidden; }
.pi-migration-band__glow { position: absolute; left: -201px; top: -351px; width: 700px; height: 700px; max-width: none; pointer-events: none; z-index: 0; }

.pi-migration-band__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; width: 620px; max-width: 100%; }
.pi-migration-band__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-migration-band__headline { margin: 0; font-family: var(--pi-font-body); font-weight: 300; font-size: 32px; line-height: 42px; letter-spacing: -0.01em; color: var(--pi-text-primary); }
.pi-migration-band__headline strong { font-weight: 700; }
.pi-migration-band__lede { margin: 0; max-width: 68ch; font-family: var(--pi-font-body); font-size: 18px; line-height: 30px; color: var(--pi-text-secondary); }

.pi-migration-band__platforms { position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.pi-migration-band__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 520px; max-width: 100%; }
/* The plain .pi-tag-outline span (Miva, Spreadsheets & ERP
   exports, Custom platforms) is untouched; this modifier only
   applies to the tags that link to a real Fyresite migration page. */
.pi-tag-outline--link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pi-tag-outline--link img { transition: transform 0.2s ease; }
@media (hover: hover) {
  .pi-tag-outline--link:hover { background: var(--pi-bg-raised); border-color: var(--pi-accent-orange); }
  .pi-tag-outline--link:hover img { transform: translate(2px, -2px); }
}
.pi-tag-outline--link:focus-visible { background: var(--pi-bg-raised); border-color: var(--pi-accent-orange); }
@media (hover: none) {
  .pi-tag-outline--link:active { transition: transform 160ms var(--pi-ease-out); transform: scale(0.96); }
}

/* 1024-1279.98px: platforms' flex-shrink:0 tags (520px) claimed most
   of the card, squeezing copy to ~185px - the eyebrow and headline
   wrapped into many single/few-word lines. Give copy a real width and
   let tags wrap into more rows instead. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pi-migration-band__card { gap: 24px; }
  .pi-migration-band__copy { width: 360px; }
  .pi-migration-band__tags { width: 300px; }
}

@media (max-width: 1023.98px) {
  .pi-migration-band { padding: 0 20px 56px; }
  .pi-migration-band__card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 24px; }
  .pi-migration-band__copy { width: 100%; }
  .pi-migration-band__headline { font-size: 26px; line-height: 1.25; }
  .pi-migration-band__platforms { align-items: flex-start; width: 100%; }
  .pi-migration-band__tags { justify-content: flex-start; width: 100%; }
  .pi-migration-band__platforms .pi-btn { width: 100%; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .pi-migration-band { padding: 0 40px 56px; }
  .pi-migration-band__platforms .pi-btn { width: auto; }
}

/* Logo wall marquee (Home Logo Wall, Book a Demo Trust) - the track
   image is Figma's own exported client-logo set, doubled end-to-end
   for a seamless loop (CLAUDE.md: export logos, never redraw them). */
.pi-logo-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 21px 0 70px;
  background: var(--pi-bg-page);
}
.pi-logo-wall__label {
  margin: 0;
  max-width: 900px;
  padding-inline: 20px;
  text-align: center;
  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-body);
}
.pi-logo-wall__marquee {
  position: relative;
  width: 100%;
  height: 36px;
  overflow: hidden;
}
.pi-logo-wall__track {
  position: absolute;
  inset: 0;
}
.pi-logo-wall__track-img {
  position: absolute;
  top: 0;
  left: -140px;
  height: 36px;
  width: auto;
  max-width: none; /* overrides framework.css's "main img { max-width: 100% }", which was squishing this wider-than-container track */
  animation: pi-marquee 40s linear infinite;
}
.pi-logo-wall__marquee--paused .pi-logo-wall__track-img {
  animation-play-state: paused;
}
.pi-logo-wall__marquee:focus-within .pi-logo-wall__track-img {
  animation-play-state: paused;
}
@media (hover: hover) {
  .pi-logo-wall__marquee:hover .pi-logo-wall__track-img {
    animation-play-state: paused;
  }
}
.pi-logo-wall__track-img--mobile { display: none; }

/* Once pi-motion.js measures the active track image, it tiles
   that same asset as a repeat-x background instead - native tiling
   covers any container width with no gap, replacing the old single
   image's hard-coded -50%. --pi-marquee-tile is the
   asset's own rendered width in px, read from its naturalWidth. */
.pi-logo-wall__marquee--tiled .pi-logo-wall__track-img {
  display: none;
}
.pi-logo-wall__marquee--tiled .pi-logo-wall__track {
  background-image: var(--pi-marquee-url);
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: pi-marquee-tile var(--pi-marquee-duration, 80s) linear infinite;
}
.pi-logo-wall__marquee--tiled.pi-logo-wall__marquee--paused .pi-logo-wall__track {
  animation-play-state: paused;
}
.pi-logo-wall__marquee--tiled:focus-within .pi-logo-wall__track {
  animation-play-state: paused;
}
@media (hover: hover) {
  .pi-logo-wall__marquee--tiled:hover .pi-logo-wall__track {
    animation-play-state: paused;
  }
}
/* The global pause toggle. */
html[data-motion="paused"] .pi-logo-wall__marquee--tiled .pi-logo-wall__track,
html[data-motion="paused"] .pi-logo-wall__marquee .pi-logo-wall__track-img {
  animation-play-state: paused;
}
@keyframes pi-marquee-tile {
  from { background-position-x: 0; }
  /* Fallback only, before JS measures the real asset - matches
     the desktop track's new (gap-widened) viewBox. */
  to { background-position-x: calc(-1 * var(--pi-marquee-tile, 2676px)); }
}
@media (prefers-reduced-motion: reduce) {
  .pi-logo-wall__marquee--tiled .pi-logo-wall__track { animation: none; }
}

@keyframes pi-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.pi-logo-wall__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 200px;
  pointer-events: none;
}
.pi-logo-wall__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--pi-bg-page), rgba(28,28,28,0));
}
.pi-logo-wall__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--pi-bg-page), rgba(28,28,28,0));
}

@media (max-width: 1023.98px) {
  .pi-logo-wall {
    gap: 20px;
    padding: 32px 0 48px;
  }
  .pi-logo-wall__marquee { height: 20px; }
  .pi-logo-wall__track-img { height: 20px; left: -40px; }
  .pi-logo-wall__track-img--desktop { display: none; }
  .pi-logo-wall__track-img--mobile { display: block; }
  .pi-logo-wall__fade { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-logo-wall__track-img { animation: none; }
}

/* FAQ accordion (Home, Landing, Book a Demo, FAQ page). Single-open
   behavior is pi-motion.js. */
.pi-faq { display: flex; gap: 90px; align-items: flex-start; padding-block: 70px 116px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-faq__header { flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; width: 380px; }
.pi-faq__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-faq__headline { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: 46px; line-height: 50px; letter-spacing: -0.02em; color: var(--pi-text-primary); }
.pi-faq__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-faq__see-all { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pi-faq__see-all span { font-family: var(--pi-font-body); font-weight: 700; font-size: 15px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pi-accent-orange-text); }

.pi-faq__items { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 20px (mobile 13px/14px) is what actually lands on Figma's
   89px/71px closed-item height, not a round-looking number on its own
   - the collapsed accordion row carries a fixed 16px from the open
   answer's own margin that the 0fr grid trick doesn't squeeze out. */
/* A solid border-bottom at a non-integer offset anti-aliases
   inconsistently between items (bright here, faint there) - true of an
   absolutely positioned pseudo-element at the same offset too, so
   border-image is what actually renders a crisp, consistent hairline
   here. Figma's gradient hairline at 55% opacity is baked into the
   gradient stops themselves (an element-level opacity would also dim
   the already-transparent background behind it). */
.pi-faq-item { display: flex; flex-direction: column; padding: 20px 0; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(255,80,0,0.55), rgba(255,93,153,0.55)) 1; }
.pi-faq-item__heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.pi-faq-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.pi-faq-item__question { margin: 0; flex: 1; min-width: 0; font-family: var(--pi-font-body); font-size: 22px; line-height: 32px; color: var(--pi-text-primary); }
.pi-faq-item__toggle { position: relative; flex-shrink: 0; width: 24px; height: 24px; }
.pi-faq-item__icon-x,
.pi-faq-item__icon-plus {
  position: absolute;
  inset: 0;
  transition: opacity var(--pi-motion-base) var(--pi-ease-out), transform var(--pi-motion-base) var(--pi-ease-out);
}
.pi-faq-item__icon-x { opacity: 0; transform: rotate(-45deg); }
.pi-faq-item__icon-plus { opacity: 1; transform: rotate(0deg); }
.pi-faq-item.is-open .pi-faq-item__icon-x { opacity: 1; transform: rotate(0deg); }
.pi-faq-item.is-open .pi-faq-item__icon-plus { opacity: 0; transform: rotate(45deg); }
/* Grid-rows accordion trick: no measured-height JS needed. The 16px
   gap before the answer lives on this wrap's margin-top, not on
   .pi-faq-item__answer itself - a margin on the grid item isn't
   zeroed by its own overflow:hidden the way its content height is, so
   it kept reserving 16px even at grid-template-rows:0fr (closed). */
.pi-faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--pi-motion-base) var(--pi-ease-out), margin-top var(--pi-motion-base) var(--pi-ease-out);
}
.pi-faq-item.is-open .pi-faq-item__answer-wrap { grid-template-rows: 1fr; margin-top: 16px; }
/* Was line-height: 30px (1.67) - too loose for 18px text. */
.pi-faq-item__answer { margin: 0; max-width: 68ch; overflow: hidden; font-family: var(--pi-font-body); font-size: 18px; line-height: 27px; color: var(--pi-text-secondary); }

@media (max-width: 1023.98px) {
  .pi-faq { flex-direction: column; gap: 32px; padding: 64px 20px; }
  .pi-faq__header { width: 100%; gap: 16px; }
  .pi-faq__headline { width: 100%; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
  .pi-faq-item { padding: 13px 0 14px; }
  .pi-faq-item__question { font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }
  .pi-faq-item__answer { font-size: var(--pi-m-body-size); line-height: var(--pi-m-body-line); }
}

/* Centered glow hero with search + jump pills (Resources Hero, FAQ Hero) */
.pi-res-hero { position: relative; padding-block: 196px 70px; padding-inline: var(--pi-content-pad); box-sizing: border-box; overflow: hidden; }
/* Centered on the hero at every width, not just 1512 (where
   left: 250px happened to put its center at the hero's own middle) -
   the individual translate property, not transform, so nothing here
   needs to coexist with an animated transform (this glow has none,
   but the pattern matches the rings elsewhere). */
.pi-res-hero__glow { position: absolute; left: 50%; translate: -50% 0; top: -464px; width: 1000px; height: 1000px; max-width: none; z-index: 0; pointer-events: none; }

.pi-res-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pi-res-hero__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-res-hero__headline { margin: 0; width: 960px; max-width: 100%; font-family: var(--pi-font-body); font-weight: 400; font-size: 64px; line-height: 72px; letter-spacing: -0.02em; color: var(--pi-text-primary); text-align: center; }
.pi-res-hero__headline-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-res-hero__lede { margin: 0; width: 720px; max-width: 100%; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: var(--pi-text-subtitle); text-align: center; }

.pi-res-hero__search { display: flex; align-items: center; gap: 14px; width: 720px; max-width: 100%; box-sizing: border-box; height: 60px; padding: 18px 24px; border-radius: 999px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.14); }
/* The input's own default focus outline drew a rectangle inside
   the pill bar. Move the ring to the bar itself via :focus-within, so
   it follows the bar's own rounded radius instead of the input's
   rectangular box. */
.pi-res-hero__search:focus-within { outline: 2px solid #FF5000; outline-offset: 2px; }
.pi-res-hero__search-input { flex: 1 0 0; min-width: 0; border: 0; background: transparent; font-family: var(--pi-font-body); font-size: 18px; line-height: 30px; color: var(--pi-text-primary); outline: none; }
.pi-res-hero__search-input::placeholder { color: var(--pi-text-muted); }
.pi-res-hero__search-input::-webkit-search-cancel-button { display: none; }
.pi-res-hero__search-key { flex-shrink: 0; display: inline-flex; padding: 4px 8px; border-radius: 6px; background: var(--pi-bg-raised-2); font-family: var(--pi-font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--pi-text-secondary); }
/* The clear button takes the key hint's place once there's a
   query - pi-motion.js toggles is-search-hidden on each. */
.pi-res-hero__search-clear { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--pi-bg-raised-2); cursor: pointer; }
.pi-res-hero__search-clear img { display: block; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .pi-res-hero__search-clear:hover img { opacity: 1; }
}
.pi-res-hero__search-count,
.pi-res-hero__search-empty { margin: 0; font-family: var(--pi-font-body); font-size: 14px; color: var(--pi-text-muted); }

/* FAQ + resource library search (pi-motion.js). Items that don't
   match the query get this instead of the plain `hidden` attribute,
   since several card classes it targets (.pi-faq-item etc.) already
   set their own `display` and would otherwise win the cascade tie. */
.is-search-hidden { display: none !important; }

.pi-res-hero__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pi-res-hero__jump-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); text-decoration: none; font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-text-subtitle); white-space: nowrap; }
.pi-res-hero__jump-count { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: linear-gradient(to right, rgba(255,80,0,0.2), rgba(255,94,156,0.2)); font-family: var(--pi-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; background-image: linear-gradient(to right, rgba(255,80,0,0.2), rgba(255,94,156,0.2)), var(--pi-grad-fyre); background-clip: padding-box, text; -webkit-background-clip: padding-box, text; color: transparent; }

@media (max-width: 1023.98px) {
  .pi-res-hero { padding: 148px 20px 56px; }
  .pi-res-hero__glow { --pi-glow-opacity: 0.7; opacity: var(--pi-glow-opacity); }
  .pi-res-hero__content { align-items: flex-start; gap: 20px; }
  .pi-res-hero__headline { width: 100%; font-size: 36px; line-height: 45px; letter-spacing: -0.02em; text-align: left; }
  .pi-res-hero__lede { width: 100%; font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); text-align: left; }
  .pi-res-hero__search { width: 100%; height: auto; padding: 14px 18px; }
  .pi-res-hero__search-input { font-size: 15px; line-height: 1.4; }
  .pi-res-hero__jump { justify-content: flex-start; width: 100%; }
}

/* ---- Tablet: see pi-home.css for the full explanation. Must
   come after the max-width:1023.98px blocks above. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pi-faq { padding: 64px 40px; }
  .pi-res-hero { padding: 148px 40px 56px; }
}

/* Calendly booking card (Book a Demo hero, Landing hero) - a
   ready-to-receive-embed slot. Once a real Calendly URL is set on the
   options page it renders the live inline widget; until then it
   shows a plain placeholder card. */
.pi-calendly-card { position: relative; width: 100%; min-height: 620px; border-radius: 16px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; scroll-margin-top: 140px; transition: min-height 200ms var(--pi-ease-out); }
/* 620/640 is just the resting size before Calendly's own
   'calendly.page_height' message arrives (pi-motion.js) and sizes
   the iframe to its real content - no empty band underneath once the
   event details are hidden. */
.pi-calendly-card__frame { display: block; width: 100%; height: 620px; border: 0; transition: height 200ms var(--pi-ease-out); }
.pi-calendly-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.pi-calendly-card__placeholder p { margin: 0; max-width: 320px; font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-muted); }
.pi-calendly-card__sync { margin: 0 auto; max-width: 68ch; text-align: center; font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-muted); }
.pi-calendly-card__sync a { color: var(--pi-text-primary); text-decoration: underline; }

@media (max-width: 1023.98px) {
  /* Figma's 926px assumed the event-type details (host name,
     duration, description) stayed visible - hidden, the picker's real
     content ends around 580px, so 926 left an empty band underneath.
     640 is just the resting size before Calendly's own height message
     arrives and sizes it for real. */
  .pi-calendly-card { min-height: 640px; }
  .pi-calendly-card__frame { height: 640px; }
}

/* UI/Product Card (Industries Powersports, Landing See It Live) */
.pi-ui-product-card { width: 204px; max-width: 100%; box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pi-ui-product-card__image { width: 100%; height: 128px; border-radius: 10px; overflow: hidden; background: var(--pi-bg-ui-light-2); flex-shrink: 0; }
.pi-ui-product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.pi-ui-product-card__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: var(--pi-success-bg); font-family: var(--pi-font-ui); font-weight: 700; font-size: 10px; color: var(--pi-success-deep); white-space: nowrap; }
.pi-ui-product-card__title { margin: 0; font-family: var(--pi-font-ui); font-weight: 700; font-size: 12px; line-height: 1.35; color: var(--pi-text-ui-dark); }
.pi-ui-product-card__price-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-ui-product-card__price { font-family: var(--pi-font-ui); font-weight: 600; font-size: 13px; color: var(--pi-text-ui-dark); }
.pi-ui-product-card__cart { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--pi-text-ui-dark); }

/* Fitment setup card (Platform Fitment Setups, Landing Industries) */
.pi-setup-card { flex: 1 1 calc(25% - 13.5px); min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 20px; background: var(--pi-bg-surface); border: 1px solid var(--pi-border-subtle); }
.pi-setup-card__top { display: flex; align-items: center; gap: 14px; }
.pi-setup-card__icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 10px; border-radius: 12px; background: rgba(255,79,0,0.12); }
.pi-setup-card__title { margin: 0; flex: 1; min-width: 0; font-family: var(--pi-font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--pi-text-primary); }
.pi-setup-card__fields { margin: 0; font-family: var(--pi-font-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; color: var(--pi-accent-orange-text); }
.pi-setup-card__example { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-subtitle); }
.pi-setup-card__example--plain { padding-left: 14px; }
.pi-setup-card__example-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; padding: 3px; box-sizing: border-box; border-radius: 999px; background: var(--pi-success); }
.pi-setup-card__description { margin: 0; flex: 1; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }

/* Module card (Home Modules, Landing What You Will See). Home's
   is now the link itself (<a>, whole card clickable, "Learn more"
   removed) - Landing's stays a plain non-interactive <div>, so the
   link reset and the hover/focus lift below are scoped to the a tag
   specifically and don't affect Landing's cards. */
.pi-module-card { flex: 1 1 calc(25% - 13.5px); min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 32px; 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-module-card { text-decoration: none; color: inherit; }
.pi-module-card__top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pi-module-card__icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; 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)); transition: background 220ms var(--pi-ease-out); }
.pi-module-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-module-card__description { margin: 0; flex: 1; font-family: var(--pi-font-body); font-size: 16px; line-height: 26px; color: var(--pi-text-body); }
/* Single-action card lift */
@media (hover: hover) and (pointer: fine) {
  a.pi-module-card:hover, a.pi-module-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-module-card:active { transform: translateY(-2px) scale(0.99); }
}
@media (hover: none) {
  a.pi-module-card:active { transition: transform 160ms var(--pi-ease-out); transform: scale(0.98); }
}

/* ---- Global / CTA Band (187:12146 component, Compact size -
   21:1045 Home, 25:2003 Platform, 29:2446 Industries, 30:2804 Case
   Studies, 57:5061 FAQ, 61:4878 Landing). Lives in pi-global.css
   (not a page-specific file) since it's shared across 6 pages. */
.pi-cta-band { display: flex; flex-direction: column; align-items: flex-start; padding-block: 24px 96px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }
.pi-cta-band__card { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; overflow: hidden; padding: 52px 64px; border-radius: 20px; background: linear-gradient(170.24deg, #FF4100, #E01765); }

/* Each ring scales outward from its own center (12% to 100%
   of its own fixed radius) at a linear speed and fades at the edge. */
.pi-cta-band__ring { position: absolute; max-width: none; pointer-events: none; animation: pi-ring-pulse 7.5s linear infinite; transform-origin: center; }
.pi-cta-band__ring--1 { left: 992px; top: -140px; width: 420px; height: 420px; animation-delay: -5s; }
.pi-cta-band__ring--2 { left: 864.5px; top: -267.5px; width: 675px; height: 675px; animation-delay: -2.5s; }
.pi-cta-band__ring--3 { left: 737px; top: -395px; width: 930px; height: 930px; animation-delay: 0s; }
/* The one shared ripple-ring keyframe for every ring group whose
   host doesn't bake its own centering transform into the animation
   (CTA band, Home native-to-shopify, Resources request CTA) - they
   used to each carry an identical copy under their own name.
   The 404, Industries, Platform and Book a Demo hero rings
   moved to pi-rings.js's streaming animation and no longer use this
   keyframe at all. */
/* The independent `scale` property, not `transform: scale()` -
   so a user of this keyframe can still keep `transform` free for its
   own centering translate. */
@keyframes pi-ring-pulse { 0% { scale: 0.12; opacity: 0; } 12% { opacity: 1; } 70% { opacity: 0.4; } 100% { scale: 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pi-cta-band__ring { animation: none; opacity: 0.6; }
}
/* The global pause toggle, and hover/focus inside the band. */
html[data-motion="paused"] .pi-cta-band__ring,
.pi-cta-band:hover .pi-cta-band__ring,
.pi-cta-band:focus-within .pi-cta-band__ring {
  animation-play-state: paused;
}

/* Hero corner-glow ambient breathing: a slow, ~8% relative dip in
   opacity so the glow reads as faintly alive instead of a static
   image, without drawing attention away from the content in front of
   it. Multiplies whatever --pi-glow-opacity already is (1 by default;
   each hero's own mobile tier sets it instead of a plain opacity so
   the breathing still has something correct to multiply there too). */
@keyframes pi-glow-breathe {
  0%, 100% { opacity: var(--pi-glow-opacity, 1); }
  50% { opacity: calc(var(--pi-glow-opacity, 1) * 0.92); }
}
.pi-glow-breathe { animation: pi-glow-breathe 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pi-glow-breathe { animation: none; }
}
html[data-motion="paused"] .pi-glow-breathe {
  animation-play-state: paused;
}

.pi-cta-band__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.pi-cta-band__heading { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: 33px; line-height: 42px; letter-spacing: -0.02em; color: var(--pi-text-primary); width: 760px; max-width: 100%; }
.pi-cta-band__body { margin: 0; font-family: var(--pi-font-body); font-size: 20px; line-height: 32px; color: rgba(255,255,255,0.92); width: 700px; max-width: 100%; }

.pi-cta-band__actions { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; gap: 24px; }
.pi-cta-band__secondary { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pi-cta-band__secondary span { font-family: var(--pi-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-text-primary); }

/* 1024-1439.98px: the fixed 760/700px copy plus the fixed-width
   rings crowd the 24px-gap actions column - same no-width-wrapper-
   adjacent-to-fixed-width-siblings shape as every other band on the
   site, so the same fix: let the copy flex down instead of
   holding its full desktop width. Was capped at 1279.98, but the
   fixed widths return above that and "Watch the webinar" ran past the
   card up to about 1420 before --pi-content-max's cap narrows the
   card enough on its own. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .pi-cta-band__card { gap: 24px; }
  .pi-cta-band__copy { flex: 1 1 0; min-width: 0; }
  .pi-cta-band__heading, .pi-cta-band__body { width: 100%; }
}

@media (max-width: 1023.98px) {
  .pi-cta-band { padding: 48px 20px 64px; }
  .pi-cta-band__card { background: linear-gradient(134.03deg, #FF4100, #E01765); flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px 24px; }
  .pi-cta-band__ring--1 { left: 120px; top: 204px; }
  .pi-cta-band__ring--2 { left: -7.5px; top: 76.5px; }
  .pi-cta-band__ring--3 { left: -135px; top: -51px; }
  .pi-cta-band__copy { gap: 14px; width: 100%; }
  .pi-cta-band__heading { width: 100%; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
  .pi-cta-band__body { width: 100%; font-size: var(--pi-m-body-lrg-size); line-height: var(--pi-m-body-lrg-line); }
  .pi-cta-band__actions { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
  .pi-cta-band__button { width: 100%; justify-content: center; padding: 15px 28px; }
  .pi-cta-band__button span { font-size: 13px; line-height: 18px; letter-spacing: 1.3px; }
  .pi-cta-band__button img { width: 16px; height: 16px; }
  .pi-cta-band__secondary { justify-content: center; }
}