.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-hero {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  padding: 112px 0 80px;
  background: #fff;
}

.product-hero__copy {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.product-hero h1 {
  margin: 0;
  font-size: clamp(2.9rem, 4.55vw, 4.65rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 1.12;
  text-wrap: balance;
}

.product-hero__copy p {
  max-width: 780px;
  margin: 18px auto 0;
  color: var(--navy-soft);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.product-hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 25px;
}

.product-hero__scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  gap: 14px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 8px;
  color: #fff;
  background: var(--orange);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  transition: background 220ms ease, box-shadow 220ms ease;
}

.product-hero__scroll .arrow-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transition: transform 320ms cubic-bezier(.22, .7, .2, 1);
}
.product-hero__scroll:hover,
.product-hero__scroll:focus-visible { background: #dc4210; box-shadow: 0 6px 16px rgba(244, 81, 24, .16); }
.product-hero__scroll:hover .arrow-icon,
.product-hero__scroll:focus-visible .arrow-icon { transform: translateY(2px); }
.product-hero__scroll:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }

.product-stage {
  position: relative;
  width: min(1180px, calc(100% - 64px));
  margin: 32px auto 0;
  scroll-margin-top: 92px;
  isolation: isolate;
}

.product-stage::before {
  position: absolute;
  inset: -60px calc(50% - 50vw) -64px;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.68) 7px 8px),
    radial-gradient(ellipse 78% 75% at 50% 70%, #dce7ff 0%, #edf3ff 55%, rgba(255, 255, 255, 0) 100%);
  mask-image: linear-gradient(transparent, #000 24%, #000 62%, transparent 100%);
  content: "";
}

.product-window {
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce3ed;
  border-radius: 14px;
  background: #f7f8fa;
  box-shadow: 0 24px 65px -24px rgba(33, 58, 106, 0.23), 0 3px 10px rgba(33, 58, 106, 0.04);
}

.product-window__bar {
  position: relative;
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 4px 68px;
  gap: 8px;
  color: #69788c;
  font-size: 0.66rem;
  font-weight: 550;
}

.product-window__dots { position: absolute; left: 14px; display: flex; gap: 6px; }
.product-window__dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff6057; }
.product-window__dots i:nth-child(2) { background: #febc2e; }
.product-window__dots i:nth-child(3) { background: #28c840; }

.product-window__screen { margin: 0 7px 7px; overflow: hidden; border: 1px solid #e8edf3; border-radius: 8px; background: #fff; }
.catalog-demo { width: 100%; min-width: 0; background: #fff; }
.catalog-demo__slice { position: relative; width: 100%; aspect-ratio: var(--slice-width, 1208) / var(--slice-height); overflow: hidden; background: #fff; }
.catalog-demo__slice img { position: absolute; left: var(--slice-left, -32.615894%); top: var(--slice-top); width: var(--slice-image-width, 159.602649%); max-width: none; height: auto; pointer-events: none; user-select: none; }
.catalog-demo__viewport { position: relative; height: clamp(360px, 40vw, 520px); overflow: hidden; contain: paint; background: #fff; }
.catalog-demo__track { width: 100%; transform: translate3d(0, 0, 0); }
.catalog-demo.is-playing .catalog-demo__track,
.catalog-demo.is-dragging .catalog-demo__track { will-change: transform; }
.catalog-demo__group { width: 100%; }
.catalog-demo.is-ready .catalog-demo__viewport { touch-action: pan-x pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none; }
.catalog-demo.is-dragging .catalog-demo__viewport { cursor: grabbing; }
.catalog-demo__viewport:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; }

.catalog-search { position: relative; container-type: inline-size; overflow: hidden; }
.catalog-search__frame { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
/* Replace the captured results frame instead of drawing a second border over it. */
.catalog-search::before,
.catalog-search::after {
  position: absolute;
  box-sizing: border-box;
  top: 34.300518%;
  left: 3.506787%;
  width: 92.986425%;
  height: 53.160622%;
  pointer-events: none;
  content: "";
}
.catalog-search::before {
  z-index: 0;
  background: #fff;
  box-shadow: 0 0 0 1px #fff;
}
.catalog-search::after {
  z-index: 3;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}
.catalog-search .catalog-demo__slice::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  pointer-events: none;
  content: "";
}
.catalog-search__results-heading {
  position: absolute;
  z-index: 2;
  top: 34.404145%;
  left: 3.61991%;
  width: 92.760181%;
  height: 9.430052%;
  padding: 2.036199% 2.488688%;
  background: #fff;
  color: #363636;
  font-family: Arial, sans-serif;
  line-height: 1.3;
}
.catalog-search__results-heading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  pointer-events: none;
  content: "";
}
.catalog-search__results-heading strong { display: block; font-size: 2.036199cqw; }
.catalog-search__results-heading span { display: block; margin-top: 1cqw; color: #666; font-size: 1.696833cqw; }
.catalog-search .catalog-demo__viewport {
  position: absolute;
  z-index: 1;
  top: 43.834197%;
  left: 3.61991%;
  width: 92.760181%;
  height: 43.523316%;
  aspect-ratio: auto;
  border-radius: 0 0 5px 5px;
}

.guided-feature .feature-title {
  max-width: none;
  line-height: 1.12;
  letter-spacing: -0.065em;
}

.feature-title__line {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.feature-title__line > span { display: block; }
.feature-title__line--accent { color: var(--orange); }
.guided-feature--catalog .guided-feature__summary { max-width: 440px; }
.guided-feature--catalog .guided-feature__summary strong { color: var(--navy); font-weight: 600; }

.motion-ready .guided-feature .feature-title {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready .feature-title__line > span {
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms ease;
}

.motion-ready .feature-title__line:nth-child(2) > span { transition-delay: 120ms; }
.motion-ready .feature-title__line:nth-child(3) > span { transition-delay: 240ms; }
.motion-ready .is-active .feature-title__line > span { opacity: 1; transform: translateY(0); }

/* Page scroll, pointer tilt and list dragging each own a separate layer. */
.catalog-scroll-scene { width: 100%; perspective: 1800px; }
.catalog-scroll-scene__surface {
  transform-origin: center;
  transform: translate3d(0, var(--catalog-scroll-offset, 0px), 0)
    rotateX(var(--catalog-scroll-pitch, 0deg)) rotateY(var(--catalog-scroll-turn, 0deg));
}
.catalog-scroll-scene.is-scroll-visible > .catalog-scroll-scene__surface { will-change: transform; }

@media (max-width: 900px) {
  .guided-feature--catalog .guided-feature__inner { gap: 32px; }
  .guided-feature .feature-title { font-size: clamp(2rem, 7.6vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero__scroll { transition: none; }
  .product-hero__scroll .arrow-icon { transform: none; transition: none; }
  .product-hero__scroll:hover .arrow-icon,
  .product-hero__scroll:focus-visible .arrow-icon { transform: none; }
  .motion-ready .guided-feature .feature-title__line > span { opacity: 1; transform: none; transition: none; }
  .catalog-scroll-scene__surface { transform: none; will-change: auto; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .catalog-search-stage > .catalog-search {
    transform: translate3d(0, 0, 0) rotateX(var(--catalog-tilt-x, 0deg)) rotateY(var(--catalog-tilt-y, 0deg));
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 450ms ease;
  }

  .catalog-search-stage.is-tilting > .catalog-search {
    transition-duration: 320ms, 450ms;
    box-shadow: 0 32px 58px -26px rgba(7, 26, 53, 0.24), 0 2px 5px rgba(7, 26, 53, 0.06);
  }
}

.motion-ready .product-hero__copy { animation: product-intro 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.motion-ready .product-window { animation: product-intro 900ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Keep the first paint readable: entrance motion must not hide the LCP. */
@keyframes product-intro { from { transform: translateY(12px); } to { transform: translateY(0); } }

@media (max-width: 900px) {
  .product-hero { padding-top: 113px; }
  .product-hero h1 { max-width: 720px; margin-inline: auto; font-size: clamp(2.65rem, 6.7vw, 3.8rem); }
  .product-hero h1 span { display: block; }
  .product-stage { width: calc(100% - 36px); margin-top: 30px; }
  .catalog-demo__viewport { height: 400px; }
  .guided-feature__media > img { width: 100%; max-width: 100%; }
  .guided-feature__media--catalog { justify-self: center; }
  .guided-feature:nth-child(4) .guided-feature__media > img { width: 100%; }
}

@media (max-width: 600px) {
  .product-hero { padding-top: 102px; }
  .product-hero__copy { width: calc(100% - 36px); }
  .product-hero h1 { font-size: clamp(2.25rem, 9.1vw, 3.1rem); line-height: 1.13; letter-spacing: -0.06em; }
  .product-hero__copy p { margin-top: 18px; font-size: 0.94rem; line-height: 1.65; }
  .product-hero__actions { gap: 9px; flex-wrap: wrap; margin-top: 21px; }
  .product-stage { width: calc(100% - 24px); margin-top: 26px; }
  .product-window { border-radius: 11px; }
  .catalog-demo__viewport { height: auto; aspect-ratio: 1208 / 820; }
  .product-window__bar { font-size: 0.57rem; padding-inline: 48px; }
  .product-window__dots { left: 10px; gap: 4px; }
  .product-window__dots i { width: 7px; height: 7px; }
  .brand { width: 144px; }
}