/* ==========================================================================
   Sales Page — /product/sales
   Scoped design system for the Figma "Sales Page /product" build.
   All rules are namespaced under body.sales-page so nothing here can leak
   into, or be affected by, the shared site stylesheets.
   ========================================================================== */

body.sales-page {
  --sp-gold: #ffbe00;
  --sp-gold-hover: #e6ac00;
  --sp-logo-orange: #f99d2a;
  --sp-ink: #282b2b;
  --sp-gray: #52525c;
  --sp-gray-2: #6b7280;
  --sp-gray-3: #a2a4a7;
  --sp-smoke: #f4f4f4;
  --sp-bone: #fafafa;
  --sp-border: #e5e7eb;
  --sp-white: #ffffff;

  --sp-space-xs: 8px;
  --sp-space-sm: 12px;
  --sp-space-md: 20px;
  --sp-space-lg: 32px;
  --sp-space-xl: 48px;
  --sp-space-2xl: 64px;

  --sp-radius-sm: 4px;
  --sp-radius-md: 8px;
  --sp-radius-pill: 999px;

  background: var(--sp-white);
  overflow-x: hidden;
}

body.sales-page * {
  box-sizing: border-box;
}

/* ---------- layout shell ---------- */

.sp-section {
  padding: var(--sp-space-2xl) 120px;
  position: relative;
}

.sp-section--tight-top {
  padding-top: var(--sp-space-xl);
}

/* 1200px is the content-column width Figma uses consistently for every
   row (Data Collectors Row, Comparison Table, Historian Features, etc.) —
   capping here keeps every section the same width on wide viewports. */
.sp-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sp-dark {
  position: relative;
  background: #000;
  color: var(--sp-bone);
  overflow: hidden;
  perspective: 800px;
}

/* Same floor-perspective treatment as the hero card: an outer layer
   holds the rotateX tilt (clipped to the section), an inner layer
   holds the flip + texture so the two transforms don't fight over
   transform-origin. */
.sp-dark__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  mix-blend-mode: screen;
  opacity: 0.4;
  transform: rotateX(38deg);
  transform-origin: top center;
  overflow: hidden;
  pointer-events: none;
}

.sp-dark__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleY(-1);
  transform-origin: center;
}

/* Dark scrim between the texture and the content so text stays legible */
.sp-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sp-dark > .sp-inner {
  position: relative;
  z-index: 1;
}

/* Step 1 gets its own moody gradient + gold radial glow, matching Figma */
.sp-step1 {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 190, 0, 0.35) 0%, rgba(255, 190, 0, 0) 45%),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 38.75%),
    #000;
  color: var(--sp-bone);
}

.sp-hairline {
  height: 1px;
  width: 100%;
  background: var(--sp-border);
  border: none;
  margin: 0;
}

.sp-hairline--dark {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- typography ---------- */

.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space-xs) var(--sp-space-sm);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-gold);
  color: var(--sp-ink);
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sp-eyebrow--ghost {
  background: none;
  padding: 0;
  color: var(--sp-gold);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sp-display {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 89px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sp-gray);
  margin: 0;
}

.sp-h2 {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sp-gray);
  margin: 0;
}

.sp-dark .sp-h2,
.sp-step1 .sp-h2 {
  color: var(--sp-bone);
}

.sp-h2--cta {
  font-size: 52px;
  color: var(--sp-bone);
}

.sp-h3 {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: var(--sp-bone);
  margin: 0;
}

.sp-h3--ink {
  color: var(--sp-ink);
}

.sp-h4 {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 30.4px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}

.sp-accent {
  color: var(--sp-gold);
}

.sp-body-lg {
  font-family: Metrophobic, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--sp-gray);
  margin: 0;
}

.sp-dark .sp-body-lg,
.sp-step1 .sp-body-lg {
  color: var(--sp-bone);
}

.sp-body {
  font-family: Metrophobic, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--sp-gray);
  margin: 0;
}

.sp-dark .sp-body,
.sp-step1 .sp-body {
  color: var(--sp-bone);
}

.sp-body-muted {
  color: var(--sp-gray-3);
}

.sp-body-sm {
  font-family: Metrophobic, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-gray-3);
  margin: 0;
}

/* ---------- buttons ---------- */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--sp-space-sm) var(--sp-space-md);
  border-radius: var(--sp-radius-md);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.sp-btn-primary {
  background: var(--sp-gold);
  color: var(--sp-ink);
}

.sp-btn-primary:hover {
  background: var(--sp-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 190, 0, 0.35);
}

.sp-btn-primary:active {
  transform: translateY(0);
}

.sp-btn-sm {
  font-size: 15px;
  padding: var(--sp-space-sm) var(--sp-space-md);
}

/* ---------- icon boxes (corner-bracket / viewfinder frame) ----------
   Figma renders this as four L-shaped corner marks, not a full dashed
   border — built here from eight tiny solid-color background rects
   (two per corner) so it scales to any box size with no extra markup.
   --sp-icon-color drives the mark color so hover/variant states only
   need to override one custom property instead of touching the whole
   gradient stack. */

.sp-icon-box {
  --sp-icon-color: var(--sp-gold);
  --sp-corner: 14px;
  --sp-corner-w: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color)),
    linear-gradient(var(--sp-icon-color), var(--sp-icon-color));
  background-size:
    var(--sp-corner) var(--sp-corner-w), var(--sp-corner-w) var(--sp-corner),
    var(--sp-corner) var(--sp-corner-w), var(--sp-corner-w) var(--sp-corner),
    var(--sp-corner) var(--sp-corner-w), var(--sp-corner-w) var(--sp-corner),
    var(--sp-corner) var(--sp-corner-w), var(--sp-corner-w) var(--sp-corner);
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  transition: background-color 0.25s ease;
}

.sp-icon-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* ---------- hero ---------- */

.sp-hero-top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-xl);
  align-items: center;
  padding: var(--sp-space-2xl) 120px var(--sp-space-2xl);
}

.sp-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

.sp-hero-copy {
  width: 100%;
  max-width: 760px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.sp-hero-lede {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/* Floating "Try Canary" window — right side of the hero */
.sp-hero-window {
  flex: 0 0 380px;
  max-width: 380px;
  background: var(--sp-gold);
  border-radius: 16px;
  padding: var(--sp-space-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 48px rgba(40, 43, 43, 0.18);
  transform: rotate(2deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 12px;
}

.sp-hero-window:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 28px 56px rgba(40, 43, 43, 0.26);
}

.sp-hero-window-spacer {
  display: none;
}

/* Above the tablet breakpoint the window becomes a fixed, floating card:
   it starts in the same visual spot as the hero design, then stays put
   (rather than scrolling away) as the page scrolls. JS refines the
   top/left to match the spacer's position; these are a same-paint
   fallback so there's no flash before that runs. */
@media (min-width: 992px) {
  .sp-hero-window-spacer {
    display: block;
    flex: 0 0 380px;
    max-width: 380px;
  }

  .sp-hero-window {
    position: fixed;
    top: 170px;
    right: 120px;
    width: 380px;
    margin-top: 0;
    z-index: 900;
  }
}

/* Small floating canary — appears once the Try Canary window is closed;
   clicking it brings the window back. */
.sp-canary-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 76px;
  height: 75px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 901;
}

.sp-canary-toggle[hidden] {
  display: none;
}

.sp-canary-toggle__normal,
.sp-canary-toggle__hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  pointer-events: none;
  /* The site-wide `img { max-width: 100% }` reset resolves against this
     button's own 76px width (its containing block, since these are
     absolutely positioned), which was silently clamping the hover image
     back down to 76px wide regardless of the width set below. */
  max-width: none;
}

.sp-canary-toggle__normal {
  width: 76px;
  height: 75px;
}

.sp-canary-toggle__hover {
  /* canary-hover-shape.svg draws the exact same-size bird glyph (measured:
     ~52.5x51.8) as canary-normal-shape.svg, just inside a much bigger
     canvas (113x112 vs 76x75) to leave room for its glow. Scaling to 1.5x
     native grows the bird itself by the same ratio -- a clear but modest
     hover-grow, not the near-tripled box size 2x native produced. */
  width: 170px;
  height: 168px;
  opacity: 0;
}

.sp-canary-toggle:hover .sp-canary-toggle__normal,
.sp-canary-toggle:focus-visible .sp-canary-toggle__normal {
  opacity: 0;
}

.sp-canary-toggle:hover .sp-canary-toggle__hover,
.sp-canary-toggle:focus-visible .sp-canary-toggle__hover {
  opacity: 1;
}

.sp-hero-window__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-hero-window__head p {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--sp-ink);
  margin: 0;
}

.sp-hero-window__close {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sp-hero-window__close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.sp-hero-window__close img {
  width: 100%;
  height: 100%;
  display: block;
}

.sp-hero-window p.sp-body {
  color: var(--sp-ink);
}

.sp-hero-window .sp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40, 43, 43, 0.35);
}

.sp-hero-card {
  position: relative;
  width: 100%;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 0 30px 0 var(--sp-gold);
  padding: 47px 48px;
  display: flex;
  align-items: flex-end;
  min-height: 385px;
  overflow: hidden;
  perspective: 800px;
  transition: box-shadow 0.3s ease;
}

.sp-hero-card:hover {
  box-shadow: 0 0 46px 0 var(--sp-gold);
}

.sp-hero-card__bg {
  position: absolute;
  inset: -10% -5% -25%;
  mix-blend-mode: screen;
  opacity: 0.9;
  transform: rotateX(38deg);
  transform-origin: top center;
  overflow: hidden;
}

/* Flip is isolated on its own layer, anchored at its own center, so it
   doesn't get clipped by the outer layer's top-anchored tilt.
   background-attachment: fixed replaces the old scroll-driven JS drift —
   a static, "sticky" plate rather than something that shifts as you scroll. */
.sp-hero-card__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleY(-1);
  transform-origin: center;
}

/* Darken the lower half so the step copy reads clearly over the busy texture */
.sp-hero-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.85) 100%);
}

.sp-hero-steps {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sp-hero-step {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px;
  margin: -8px;
  border-radius: 12px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.sp-hero-step .sp-icon-box {
  --sp-corner: 10px;
}

.sp-hero-step:hover {
  background: rgba(255, 190, 0, 0.1);
  transform: translateY(-3px);
}

.sp-hero-step:hover .sp-icon-box {
  --sp-icon-color: #fff;
  background-color: rgba(255, 190, 0, 0.2);
}

.sp-hero-step__num {
  font-family: Blinker, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: var(--sp-bone);
  text-align: center;
}

.sp-hero-step__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 210px;
}

.sp-hero-step__title {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sp-bone);
  margin: 0;
}

.sp-hero-step__desc {
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sp-bone);
  margin: 0;
}

.sp-hero-arrow {
  width: 20px;
  height: 40px;
  flex-shrink: 0;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.sp-hero-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- fundamental principles ---------- */

.sp-principles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-xl);
  text-align: center;
  padding: var(--sp-space-2xl) 120px;
}

.sp-principles-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.sp-principles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-space-xl);
  width: 100%;
  max-width: 1010px;
}

.sp-principle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 300px;
  padding: 12px;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(24px);
}

.sp-principle.sp-in-view {
  opacity: 1;
  transform: translateY(0);
}

.sp-principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(40, 43, 43, 0.08);
}

.sp-principle:hover .sp-icon-box {
  --sp-icon-color: var(--sp-gold-hover);
  background-color: rgba(255, 190, 0, 0.08);
}

.sp-principle__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-principle__title {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 30.4px;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0;
}

.sp-principle__desc {
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-gray-2);
  margin: 0;
}

/* ---------- generic bento grid + card (reused by several sections) ---------- */

.sp-bento-grid {
  display: flex;
  gap: var(--sp-space-xl);
  width: 100%;
  align-items: stretch;
}

.sp-bento-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  opacity: 0;
  transform: translateY(24px);
}

.sp-bento-card.sp-in-view {
  opacity: 1;
  transform: translateY(0);
}

.sp-bento-card:hover {
  transform: translateY(-6px);
}

.sp-bento-card--dark {
  background:
    radial-gradient(305px 375px at 50% 100%, rgba(255, 190, 0, 0.2), rgba(255, 190, 0, 0)),
    var(--sp-ink);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 24px 30px;
  overflow: hidden;
}

.sp-bento-card--dark:hover {
  border-color: var(--sp-gold);
  box-shadow: 0 16px 40px rgba(255, 190, 0, 0.15);
}

.sp-bento-card--light {
  background: var(--sp-smoke);
  border: 1px solid var(--sp-gold);
  padding: 47px 48px;
  gap: 16px;
}

.sp-bento-card--light:hover {
  box-shadow: 0 16px 40px rgba(255, 190, 0, 0.25);
  background: #fff;
}

.sp-bento-card--light .sp-icon-box {
  --sp-corner: 11px;
}

.sp-bento-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sp-bento-card__label {
  font-family: "Instrument Sans", sans-serif;
  font-size: 18px;
  color: var(--sp-gold);
  margin: 0;
}

.sp-bento-card__spark {
  color: var(--sp-gold);
  font-size: 19px;
  line-height: 1;
}

.sp-bento-card__desc {
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-smoke);
  margin: 0;
}

.sp-bento-card__media {
  position: relative;
  flex: 1;
  min-height: 290px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sp-bento-card__media img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.sp-bento-card__title {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 30.4px;
  color: var(--sp-ink);
  margin: 0;
}

.sp-bento-card__body {
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-gray);
  margin: 0;
}

.sp-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

.sp-bullets--roomy {
  gap: 16px;
}

.sp-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-bullet__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-gold);
  flex-shrink: 0;
}

.sp-bullet span {
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-ink);
}

/* ---------- Step 1: data collectors row ---------- */

.sp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2xl);
  width: 100%;
}

.sp-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.sp-collectors-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-space-md);
}

.sp-checklist {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 4px;
}

.sp-check-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sp-check-item .sp-icon-box {
  width: 40px;
  height: 40px;
  padding: 4px;
  --sp-corner: 10px;
}

.sp-check-item .sp-icon-box img {
  width: 30px;
  height: 30px;
}

.sp-check-item span {
  font-family: Metrophobic, sans-serif;
  font-size: 18px;
  color: var(--sp-gold);
}

.sp-collectors-visual {
  background: var(--sp-gold);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sp-collectors-visual__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 588 / 477;
  overflow: hidden;
}

.sp-collectors-visual__frame img {
  position: absolute;
  width: 107.2%;
  max-width: none;
  height: auto;
  left: 0;
  top: -4.22%;
}

/* ---------- logo marquee ---------- */

.sp-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-md);
  width: 100%;
}

.sp-marquee-viewport {
  width: 100%;
  overflow: hidden;
  padding: var(--sp-space-lg) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.sp-marquee-track {
  display: flex;
  width: max-content;
  animation: sp-marquee-scroll 32s linear infinite;
}

.sp-marquee-viewport:hover .sp-marquee-track {
  animation-play-state: paused;
}

.sp-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 96px;
  padding-right: 96px;
}

.sp-marquee-group img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sp-marquee-group img:hover {
  opacity: 1;
  transform: scale(1.05);
}

@keyframes sp-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- store & forward schematic ---------- */

.sp-flow {
  background: var(--sp-smoke);
  border-radius: 16px;
  padding: var(--sp-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 127px;
}

.sp-flow-node {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--sp-gray);
  white-space: nowrap;
}

.sp-flow-node--gold {
  background: var(--sp-gold);
  border: none;
  color: var(--sp-ink);
}

.sp-flow-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.sp-flow-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- canary historian intro ---------- */

.sp-historian-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-lg);
  width: 100%;
}

.sp-historian-head__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-historian-head .sp-icon-box {
  width: 78px;
  height: 78px;
}

.sp-historian-head .sp-icon-box img {
  width: 44px;
  height: 44px;
}

/* ---------- comparison table ---------- */

.sp-compare {
  background: var(--sp-bone);
  border: 1px solid var(--sp-gold);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 48px 0 rgba(255, 190, 0, 0.3);
}

.sp-compare-row {
  display: flex;
  align-items: center;
  padding: var(--sp-space-md) var(--sp-space-2xl);
  border-top: 1px solid var(--sp-border);
  gap: 24px;
}

.sp-compare-row:first-child {
  border-top: none;
  padding-top: var(--sp-space-lg);
  padding-bottom: var(--sp-space-lg);
}

.sp-compare-row:hover:not(:first-child) {
  background: rgba(255, 190, 0, 0.06);
}

.sp-compare-row__label {
  flex: 1;
  font-family: "Instrument Sans", sans-serif;
  font-size: 18px;
  color: var(--sp-ink);
}

.sp-compare-head {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  width: 80px;
  flex-shrink: 0;
}

.sp-compare-head--canary {
  color: var(--sp-gold-hover);
}

.sp-compare-head--sql {
  color: var(--sp-gray);
}

.sp-compare-col {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-compare-col .sp-icon-box {
  width: 32px;
  height: 32px;
  padding: 3px;
  --sp-corner: 8px;
}

/* the shared check icon asset is white-filled (built for dark backgrounds);
   invert it here so it reads dark against the light comparison table.
   Scoped to the "yes" column only — the cross icon is already dark-toned. */
.sp-compare-col:not(.sp-compare-col--no) img {
  filter: invert(1);
}

.sp-compare-col .sp-icon-box img {
  width: 22px;
  height: 22px;
}

.sp-compare-col--no .sp-icon-box {
  --sp-icon-color: var(--sp-gray-2);
}

/* ---------- historian specs strip ---------- */

.sp-specs {
  position: relative;
  border-radius: 20px;
  padding: 24px 32px 0 var(--sp-space-2xl);
  display: flex;
  align-items: center;
  gap: var(--sp-space-xl);
  overflow: hidden;
  background: var(--sp-ink);
}

.sp-specs__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.5;
  /* Matches Figma: the texture is masked out over the copy (left ~42%)
     and only reveals itself behind the laptop visual on the right. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 41.833%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 41.833%, black 100%);
}

.sp-specs__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleY(-1);
}

/* Dark scrim between the texture and the content so text stays legible */
.sp-specs__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.sp-specs__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-md);
}

/* Matches Figma: a 457x302 slot sets the row height, and the laptop is
   drawn larger than the slot, bleeding left behind the form's right edge
   and off the bottom of the card (clipped by .sp-specs overflow). */
.sp-specs__visual {
  position: relative;
  flex-shrink: 0;
  width: 457px;
  max-width: 40%;
  aspect-ratio: 457 / 302;
}

.sp-specs__visual img {
  position: absolute;
  left: -41.9%;
  top: -0.66%;
  width: 134.7%;
  max-width: none;
  height: auto;
}

.sp-field-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.sp-field {
  flex: 1;
  min-width: 220px;
}

.sp-input {
  width: 100%;
  padding: var(--sp-space-sm);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-family: Metrophobic, sans-serif;
  font-size: 16px;
  color: var(--sp-ink);
  background: #fff;
}

.sp-input::placeholder {
  color: var(--sp-gray-2);
}

/* ---------- views panel (step 2) ---------- */

/* Step progress rail — Figma names this "sticky in left margin,
   scroll-spy active state" for the whole Step 1-3 journey; scoped here
   to Step 2 only, showing 2 as the current step. Hidden below the
   width where it would crowd the 774px title column. */
/* A single floating rail (fixed, outside the step sections) so only one
   instance ever exists — no risk of two showing at once during a section
   handoff. Each step section keeps an in-flow spacer the same width as
   the rail so its content column stays indented as if the rail were
   still part of the layout. JS toggles visibility/position/step on scroll. */
.sp-step-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sp-step-rail--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-step-rail-spacer {
  width: 28px;
  flex-shrink: 0;
}

.sp-step-rail__node {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-step-rail__node:hover {
  transform: scale(1.12);
}

.sp-step-rail__node:focus-visible {
  outline: 2px solid var(--sp-gold);
  outline-offset: 2px;
}

.sp-step-rail__node--done {
  background: var(--sp-ink);
  color: var(--sp-bone);
}

.sp-step-rail__node--active {
  background: var(--sp-gold);
  color: var(--sp-ink);
}

.sp-step-rail__node--upcoming {
  background: var(--sp-smoke);
  color: var(--sp-gray-3);
}

.sp-step-rail__connector {
  width: 2px;
  height: 40px;
  background: var(--sp-border);
  flex-shrink: 0;
}

.sp-step-rail__connector--active {
  background: var(--sp-gold);
}

.sp-step-rail--on-dark .sp-step-rail__connector:not(.sp-step-rail__connector--active) {
  background: rgba(255, 255, 255, 0.18);
}

.sp-step-rail--on-dark .sp-step-rail__node--upcoming {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sp-gray-3);
}

.sp-views-panel {
  --sp-views-pad: var(--sp-space-2xl);
  background: var(--sp-ink);
  border-radius: 20px;
  box-shadow: 0 0 30px 0 var(--sp-gold);
  padding: var(--sp-views-pad);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  gap: var(--sp-space-lg);
  flex-wrap: wrap;
}

.sp-views-panel__copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
}

.sp-views-panel__copy .sp-body {
  color: var(--sp-bone);
}

.sp-views-panel__label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-views-panel__label .sp-icon-box {
  width: 32px;
  height: 32px;
  padding: 4px;
  --sp-corner: 8px;
}

.sp-views-panel__label .sp-icon-box img {
  width: 22px;
  height: 22px;
}

.sp-views-panel__label span {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--sp-gold-hover);
}

.sp-views-panel__diagram {
  flex: 1 1 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: calc(-1 * var(--sp-views-pad));
}

.sp-views-panel__diagram img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

/* ---------- step 3 header / axiom / gallery / feeds ---------- */

.sp-step3-head {
  display: flex;
  align-items: center;
  gap: 21px;
  width: 100%;
}

.sp-step3-head img {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.sp-step3-head__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.sp-axiom-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-space-2xl);
  width: 100%;
  flex-wrap: wrap;
}

.sp-axiom-copy {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-md);
}

.sp-axiom-form {
  flex: 0 1 414px;
  background: var(--sp-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: var(--sp-space-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-axiom-form__head p:first-child {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--sp-bone);
  margin: 0 0 6px;
}

.sp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-lg);
  width: 100%;
}

.sp-gallery-row {
  display: flex;
  gap: var(--sp-space-lg);
  width: 100%;
  flex-wrap: wrap;
}

.sp-gallery-card {
  flex: 1 1 220px;
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 183px;
  gap: 12px;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
}

.sp-gallery-card.sp-in-view {
  opacity: 1;
  transform: translateY(0);
}

.sp-gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

.sp-gallery-card--shot {
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--sp-ink, #282b2b);
  overflow: hidden;
}

.sp-gallery-card--shot img {
  display: block;
  width: 100%;
  aspect-ratio: 282 / 158;
  object-fit: cover;
  object-position: left top;
}

.sp-gallery-card__dots {
  width: 28px;
  height: 6px;
}

.sp-gallery-card__label {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--sp-gray-3);
  margin: 0;
}

.sp-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}

.sp-bars span {
  width: 20px;
  border-radius: 3px;
  background: var(--sp-gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-bars--muted span {
  background: var(--sp-gray-3);
}

.sp-gallery-card.sp-in-view .sp-bars span {
  transform: scaleY(1);
}

.sp-bars span:nth-child(1) { transition-delay: 0.05s; }
.sp-bars span:nth-child(2) { transition-delay: 0.12s; }
.sp-bars span:nth-child(3) { transition-delay: 0.19s; }
.sp-bars span:nth-child(4) { transition-delay: 0.26s; }
.sp-bars span:nth-child(5) { transition-delay: 0.33s; }
.sp-bars span:nth-child(6) { transition-delay: 0.4s; }

.sp-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.sp-ring img {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 84px;
  height: 84px;
  transform: scale(0.4) rotate(-90deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.sp-gallery-card.sp-in-view .sp-ring img {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.sp-ring span {
  position: absolute;
  left: 0;
  top: 42px;
  width: 100px;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--sp-ink);
}

.sp-progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--sp-smoke);
  overflow: hidden;
}

.sp-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--sp-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease;
}

.sp-progress-track:nth-child(1) .sp-progress-fill { transition-delay: 0.1s; }
.sp-progress-track:nth-child(2) .sp-progress-fill { transition-delay: 0.25s; }
.sp-progress-track:nth-child(3) .sp-progress-fill { transition-delay: 0.4s; }

.sp-gallery-card.sp-in-view .sp-progress-fill {
  transform: scaleX(1);
}

.sp-feeds {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-lg);
  width: 100%;
}

.sp-feeds__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 900px;
}

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-chip {
  background: var(--sp-smoke);
  border-radius: var(--sp-radius-pill);
  padding: 8px 14px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--sp-ink);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sp-chip:hover {
  background: var(--sp-gold);
  transform: translateY(-2px);
}

/* ---------- primary CTA ---------- */

.sp-cta {
  position: relative;
  background: #282b2b;
  color: var(--sp-bone);
  padding: var(--sp-space-2xl) 120px;
  text-align: center;
  overflow: hidden;
}

.sp-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.45;
  transform: scaleY(-1);
}

/* Dark scrim between the texture and the content so text stays legible */
.sp-cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.sp-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-md);
  max-width: 768px;
  margin: 0 auto;
}

.sp-cta-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
  max-width: 638px;
  flex-wrap: wrap;
  justify-content: center;
}

/* HubSpot forms are set to render as raw HTML (not an iframe embed), so
   their fields/labels/button live in our own DOM and can be styled directly
   with the project's own look instead of HubSpot's default theme. */
.sp-hs-embed {
  width: 100%;
  min-height: 56px;
}

.sp-hs-embed form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sp-hs-embed .hs-form-field {
  margin: 0;
  order: 1;
}

.sp-hs-embed .hs-form-field label {
  font-family: Metrophobic, sans-serif;
  font-size: 14px;
  color: var(--sp-gray-3);
  display: block;
  margin-bottom: 4px;
}

.sp-hs-embed .input {
  margin: 0;
}

.sp-hs-embed .hs-input {
  width: 100%;
  font-family: Metrophobic, sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--sp-ink);
  box-sizing: border-box;
}

.sp-hs-embed .hs-input:focus {
  outline: none;
  border-color: var(--sp-gold);
}

.sp-hs-embed .hs_recaptcha {
  order: 2;
  margin: 0;
}

.sp-hs-embed .hs_submit {
  order: 3;
  margin: 0;
}

.sp-hs-embed .hs-button {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: var(--sp-gold);
  color: var(--sp-ink);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-hs-embed .hs-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40, 43, 43, 0.2);
}

.sp-hs-embed .hs-error-msgs {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.sp-hs-embed .hs-error-msgs label {
  font-family: Metrophobic, sans-serif;
  font-size: 12px;
  color: #d33;
}

.sp-hs-embed .submitted-message {
  font-family: Metrophobic, sans-serif;
  font-size: 14px;
  color: var(--sp-ink);
}

/* Row layout: email field + button side by side, matching the original
   Historian Specs / Any Questions field-row design. */
.sp-hs-embed--row form {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.sp-hs-embed--row .hs-form-field {
  order: 1;
  flex: 1 1 200px;
}

.sp-hs-embed--row .hs_submit {
  /* Recaptcha sits between the field and the button in the DOM; reorder so
     the button stays right next to the email field and recaptcha drops to
     its own full-width line below instead of breaking that alignment. */
  order: 2;
  flex: 0 0 auto;
}

.sp-hs-embed--row .hs_recaptcha {
  order: 3;
  flex: 1 0 100%;
}

/* A textarea (e.g. Any Questions' additional_comments) can't share the
   field + button row, so it takes a full line; that also stacks the email
   field above it and drops the button below both. */
.sp-hs-embed--row .hs-fieldtype-textarea {
  flex: 1 0 100%;
}

.sp-hs-embed textarea.hs-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.sp-hs-embed--cta {
  max-width: 480px;
  margin: 0 auto;
}

.sp-hs-embed--cta .hs_submit {
  margin-left: auto;
}

.sp-cta-form .sp-field {
  text-align: left;
}

.sp-cta-form label {
  display: block;
  font-family: Metrophobic, sans-serif;
  font-size: 14px;
  color: var(--sp-bone);
  margin-bottom: 6px;
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
  .sp-section,
  .sp-hero-top,
  .sp-principles,
  .sp-cta {
    padding-left: 48px;
    padding-right: 48px;
  }

  .sp-step-rail,
  .sp-step-rail-spacer {
    display: none;
  }

  .sp-display {
    font-size: 64px;
  }

  .sp-h2 {
    font-size: 44px;
  }

  .sp-bento-grid,
  .sp-row,
  .sp-axiom-row {
    flex-wrap: wrap;
  }

  .sp-hero-head {
    flex-direction: column;
    align-items: stretch;
  }

  .sp-hero-copy,
  .sp-hero-lede {
    max-width: 100%;
  }

  .sp-hero-window {
    flex: none;
    max-width: 420px;
    transform: none;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .sp-section,
  .sp-hero-top,
  .sp-principles,
  .sp-cta {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: var(--sp-space-xl);
    padding-bottom: var(--sp-space-xl);
  }

  .sp-display {
    font-size: 40px;
  }

  .sp-h2 {
    font-size: 32px;
  }

  .sp-h2--cta {
    font-size: 32px;
  }

  .sp-h3 {
    font-size: 26px;
  }

  .sp-hero-card {
    padding: 24px;
  }

  .sp-hero-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .sp-hero-arrow {
    display: none;
  }

  .sp-hero-window {
    max-width: 100%;
  }

  .sp-principles-grid,
  .sp-bento-grid,
  .sp-row,
  .sp-axiom-row,
  .sp-gallery-row {
    flex-direction: column;
  }

  .sp-row > *,
  .sp-bento-grid > *,
  .sp-axiom-row > *,
  .sp-gallery-row > * {
    flex: 1 1 auto;
    width: 100%;
  }

  .sp-historian-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-compare-row {
    padding: var(--sp-space-md) 16px;
    gap: 12px;
  }

  .sp-compare-row__label {
    font-size: 14px;
  }

  .sp-compare-head,
  .sp-compare-col {
    width: 48px;
  }

  .sp-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sp-flow-node {
    text-align: center;
    white-space: normal;
  }

  .sp-flow-arrow {
    align-self: center;
    transform: rotate(180deg);
  }

  .sp-specs {
    flex-direction: column;
    padding: var(--sp-space-lg);
  }

  .sp-specs__visual {
    max-width: 100%;
    width: 100%;
    aspect-ratio: auto;
    margin-bottom: calc(-1 * var(--sp-space-lg));
  }

  .sp-specs__visual img {
    position: static;
    width: 100%;
  }

  .sp-views-panel {
    --sp-views-pad: var(--sp-space-lg);
    flex-direction: column;
    align-items: stretch;
  }

  .sp-views-panel__copy {
    align-self: auto;
    flex: none;
  }

  .sp-views-panel__diagram {
    align-self: center;
    flex: none;
    width: 100%;
  }

  .sp-step3-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-cta-form {
    flex-direction: column;
    align-items: stretch;
  }

  /* Figma's mobile frame explicitly disables the parallax layers */
  .sp-hero-card__bg,
  .sp-dark__bg {
    transform: none !important;
  }

  body.sales-page .text-color-yellow.text-style-allcaps.footer-title {
    font-size: 1.2rem;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sp-principle,
  .sp-bento-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sp-hero-card__bg,
  .sp-dark__bg {
    transform: none !important;
  }

  .sp-marquee-track {
    animation: none;
  }
}