/*
 * JazPiper Pro X V5.0 — current production build 5.0.29
 * Responsive implementation aligned to JazPiper Design System v1.
 * Reference frames: 1440 desktop / 1024 tablet / 390 mobile.
 */

.jp-prox {
  --jp-brand-red: #ed1c24;
  --jp-ink: #111318;
  --jp-black: #000;
  --jp-white: #fff;
  --jp-muted: rgba(255, 255, 255, .50);
  --jp-border: #1c0153;
  --jp-purple: #8e54e9;
  --jp-blue: #4776e6;
  --jp-title-a: #e0eafc;
  --jp-title-b: #cfdef3;

  --jp-stage: 1280px;
  --jp-content: 1120px;
  --jp-header: 913px;

  /* Semantic text measures: same content role = same readable line length. */
  --jp-measure-section-intro: 913px;
  --jp-measure-supporting: 783px;
  --jp-measure-feature: 540px;
  --jp-measure-spatial: 662px;
  --jp-measure-media-caption: 958px;

  --jp-space-4: 4px;
  --jp-space-8: 8px;
  --jp-space-12: 12px;
  --jp-space-16: 16px;
  --jp-space-20: 20px;
  --jp-space-24: 24px;
  --jp-space-32: 32px;
  --jp-space-40: 40px;
  --jp-space-48: 48px;
  --jp-space-64: 64px;
  --jp-space-80: 80px;
  --jp-space-96: 96px;
  --jp-space-120: 120px;
  --jp-space-160: 160px;

  --jp-page-gutter: 64px;
  --jp-section-pad: 120px;
  --jp-compact-pad: 80px;
  --jp-grid-gap: 24px;
  --jp-content-gap: 32px;
  --jp-stack-gap: 24px;
  --jp-header-content-gap: 40px;
  --jp-media-copy-gap: 48px;
  --jp-control-gap: 32px;

  --jp-h1: 72px;
  --jp-h1-line: 78px;
  --jp-h2: 52px;
  --jp-h2-line: 60px;
  --jp-h3: 36px;
  --jp-h3-line: 44px;
  --jp-h4: 28px;
  --jp-h4-line: 36px;
  --jp-body-l: 20px;
  --jp-body-l-line: 32px;
  --jp-body-m: 16px;
  --jp-body-m-line: 26px;
  --jp-body-support: 18px;
  --jp-body-support-line: 30px;
  --jp-label: 13px;
  --jp-label-line: 18px;

  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--jp-black);
  color: var(--jp-white);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.jp-prox,
.jp-prox *,
.jp-prox *::before,
.jp-prox *::after { box-sizing: border-box; }

.jp-prox-preview-page {
  overflow-x: hidden;
  background: #000;
}

.jp-prox h1,
.jp-prox h2,
.jp-prox h3,
.jp-prox p { margin: 0; }

.jp-prox img {
  display: block;
  max-width: 100%;
}

.jp-prox__stage {
  width: min(100%, var(--jp-stage));
  margin-inline: auto;
  overflow: visible;
  background: var(--jp-black);
}

.jp-section {
  position: relative;
  width: 100%;
}

/* ---------- Shared typography ---------- */
.jp-section-header,
.jp-spatial-header {
  width: min(var(--jp-header), calc(100% - 160px));
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-24);
}

.jp-section-header--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.jp-section-header--left,
.jp-spatial-header {
  margin-left: 80px;
  align-items: flex-start;
  text-align: left;
}

.jp-eyebrow {
  font-size: var(--jp-body-l);
  line-height: var(--jp-body-l-line);
  font-weight: 400;
  background: linear-gradient(90deg, var(--jp-blue), var(--jp-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jp-section-header h2,
.jp-spatial-header h2 {
  font-size: var(--jp-h1);
  line-height: var(--jp-h1-line);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--jp-title-a), var(--jp-title-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow: visible;
  padding-bottom: .10em;
}

.jp-spatial-header h2 {
  font-size: var(--jp-h2);
  line-height: var(--jp-h2-line);
  font-weight: 700;
  letter-spacing: -.015em;
}

.jp-intro,
.jp-body-large {
  color: var(--jp-muted);
  font-size: var(--jp-body-l);
  line-height: var(--jp-body-l-line);
  font-weight: 400;
}

/* Text measure system. Do not tune paragraph widths section-by-section.
   Major section intros share one measure; standalone supporting copy uses a
   narrower measure; component copy remains inside its component column. */
.jp-section-intro {
  width: min(100%, var(--jp-measure-section-intro));
}

.jp-section-header--center .jp-section-intro {
  margin-inline: auto;
}

.jp-supporting-copy {
  width: min(100%, var(--jp-measure-supporting));
  margin-inline: auto;
  color: var(--jp-muted);
  font-size: var(--jp-body-support);
  line-height: var(--jp-body-support-line);
}

.jp-feature-copy p,
.jp-feature-card__copy p,
.jp-microphones__intro p,
.jp-dsp-card__copy p,
.jp-technical-copy p,
.jp-convenience-row__copy p {
  max-width: var(--jp-measure-feature);
}

.jp-feature-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-12);
  align-items: flex-start;
}

.jp-feature-copy h3,
.jp-feature-card__copy h3,
.jp-microphones__intro h3,
.jp-dsp-card__copy h3,
.jp-technical-copy h3 {
  color: #fff;
  font-size: var(--jp-h4);
  line-height: var(--jp-h4-line);
  font-weight: 600;
  letter-spacing: -.005em;
}

.jp-feature-copy p,
.jp-feature-card__copy p,
.jp-microphones__intro p,
.jp-dsp-card__copy p {
  color: var(--jp-muted);
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
  font-weight: 400;
}

/* Driver technical explanation is component-level feature body copy,
   matching the Up-firing and Down-firing explanatory paragraphs. */
.jp-technical-copy p {
  color: var(--jp-muted);
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
  font-weight: 400;
}

.jp-media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jp-media--cover .jp-media-image { object-fit: cover; }

/* ---------- Hero ---------- */
.jp-section--hero {
  padding: 177px 0 var(--jp-section-pad);
}

.jp-hero {
  width: min(1184px, calc(100% - 96px));
  margin-inline: auto;
  text-align: center;
}

.jp-brand-logo {
  width: 304px;
  height: 52px;
  margin-inline: auto;
}

.jp-brand-logo .jp-media-image {
  object-fit: contain;
}

.jp-brand {
  margin-inline: auto;
  color: #fff;
  font-size: var(--jp-label);
  line-height: var(--jp-label-line);
  font-weight: 700;
}

.jp-brand span {
  margin-left: .28em;
  font-size: .72em;
  font-weight: 400;
}

.jp-hero h1 {
  margin-top: var(--jp-space-80);
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--jp-title-a), var(--jp-title-b));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: var(--jp-h1);
  line-height: var(--jp-h1-line);
  font-weight: 800;
  letter-spacing: -.02em;
}

.jp-hero__subtitle {
  margin-top: var(--jp-space-12) !important;
  color: #fff;
  font-size: var(--jp-h3);
  line-height: var(--jp-h3-line);
  font-weight: 700;
  letter-spacing: -.01em;
}

.jp-media-slot--hero {
  width: min(1072px, 100%);
  aspect-ratio: 1072 / 388;
  margin: var(--jp-space-80) auto 0;
}

/* ---------- Hero video ---------- */
.jp-hero-video {
  position: relative;
  width: min(1232px, calc(100% - 48px));
  aspect-ratio: 16 / 9;
  margin: var(--jp-space-80) auto 0;
  overflow: hidden;
  border-radius: 30px;
  background: #000;
  isolation: isolate;
}

.jp-hero-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.jp-hero-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(8, 8, 8, .72);
  color: rgba(255, 255, 255, .96);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.jp-hero-video__play[hidden] {
  display: none !important;
}

.jp-hero-video__play-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  margin-left: 2px;
}

.jp-hero-video.is-play-required .jp-hero-video__sound,
.jp-hero-video.has-video-error .jp-hero-video__sound {
  opacity: 0;
  pointer-events: none;
}

.jp-hero-video__sound {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(8, 8, 8, .62);
  color: rgba(255, 255, 255, .94);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.jp-hero-video__sound:hover {
  background: rgba(18, 18, 18, .78);
  border-color: rgba(255, 255, 255, .22);
}

.jp-hero-video__sound:active {
  transform: scale(.97);
}

.jp-hero-video__sound:focus-visible {
  outline: 2px solid rgba(224, 234, 252, .9);
  outline-offset: 3px;
}

.jp-hero-video__sound-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.jp-hero-video__sound-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jp-hero-video__sound-icon--on {
  display: none;
}

.jp-hero-video__sound.is-sound-on .jp-hero-video__sound-icon--off {
  display: none;
}

.jp-hero-video__sound.is-sound-on .jp-hero-video__sound-icon--on {
  display: block;
}

/* ---------- Overview introduction ----------
   This belongs to the hero narrative rather than starting a new chapter.
   Its title therefore uses the same hierarchy as “Sound From Above You, And Below”. */
.jp-overview-intro {
  margin-top: var(--jp-section-pad);
}

.jp-overview-intro h2 {
  font-size: var(--jp-h2);
  line-height: var(--jp-h2-line);
  font-weight: 700;
  letter-spacing: -.015em;
}

/* ---------- Overview cards ---------- */
.jp-overview {
  width: min(var(--jp-content), calc(100% - 160px));
  margin: var(--jp-space-64) auto 0;
}

.jp-overview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box;
}

.jp-overview-card--featured {
  height: 400px;
}

.jp-overview-card--secondary {
  height: 400px;
  padding: 0;
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box;
}

.jp-overview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jp-space-40);
  margin-top: var(--jp-space-24);
}

.jp-feature-copy--overview-main {
  position: absolute;
  left: 55.45%;
  top: 50%;
  width: 40.72%;
  transform: translateY(-50%);
}

.jp-overview-card__media {
  position: absolute;
  z-index: 1;
}

.jp-overview-card__media--featured {
  left: 3.6%;
  top: 8.5%;
  width: 46.4%;
  height: 83%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jp-overview-card__media--featured .jp-media-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Figma coordinates are measured from the card border. Copy is positioned
   explicitly; product media is anchored to the actual bottom edge. */
.jp-overview-card__media--subwoofer {
  left: 98px;
  bottom: -10px;
  width: 343px;
  height: 309px;
}

.jp-overview-card__media--microphones {
  left: 121px;
  bottom: -10px;
  width: 297px;
  height: 264px;
}

.jp-overview-card__media--secondary {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.jp-overview-card__media--secondary .jp-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.jp-overview-card--secondary .jp-feature-copy {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 364px;
  max-width: calc(100% - 80px);
}

/* ---------- Design ---------- */
.jp-section--design {
  padding: 60px 0 var(--jp-section-pad);
}

.jp-media-slot--design {
  width: min(1232px, calc(100% - 48px));
  aspect-ratio: 1232 / 480;
  margin: var(--jp-space-80) auto 0;
}

.jp-design-body {
  width: min(var(--jp-measure-supporting), calc(100% - 160px));
  margin: var(--jp-space-16) auto 0;
  text-align: center;
}

.jp-design-body .jp-body-large {
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: var(--jp-body-support);
  line-height: var(--jp-body-support-line);
}

/* ---------- Sound ---------- */
.jp-section--sound {
  padding: 17px 0 var(--jp-section-pad);
}

.jp-sound-layout {
  position: relative;
  width: 100%;
  height: 492px;
  margin: var(--jp-space-40) auto 0;
}

.jp-technical-copy {
  position: absolute;
  left: 80px;
  top: 165px;
  width: 439px;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-32);
  align-items: flex-start;
  z-index: 2;
}

.jp-sound-spec {
  position: absolute;
  left: 80px;
  top: 330px;
  width: 439px;
  margin: 0 !important;
  color: #fff;
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
}

.jp-media-slot--sound-architecture {
  position: absolute;
  left: 537px;
  top: 0;
  width: 738px;
  height: 492px;
  overflow: hidden;
}

.jp-media-slot--sound-architecture .jp-media-image {
  object-fit: cover;
  object-position: center;
}

/* ---------- Spatial sound ---------- */
.jp-section--spatial {
  padding: 15px 0 var(--jp-section-pad);
}

.jp-spatial-feature {
  margin-top: var(--jp-section-pad);
}

.jp-feature-copy--wide {
  width: min(var(--jp-measure-spatial), calc(100% - 160px));
  margin-left: 80px;
}

/* Spatial feature paragraphs are intentionally wider than ordinary component copy.
   Figma uses a 662px text block for both Up-firing and Down-firing sections. */
.jp-feature-copy--wide p {
  max-width: var(--jp-measure-spatial);
}

.jp-media-slot--upfiring {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 0;
}

.jp-spatial-feature--down {
  margin-top: var(--jp-space-40);
}

.jp-media-slot--downfiring {
  width: min(632px, calc(100% - 160px));
  aspect-ratio: 1 / 1;
  margin: var(--jp-space-40) auto 0;
}

/* ---------- Microphones ---------- */
.jp-microphones {
  width: min(var(--jp-content), calc(100% - 160px));
  margin: var(--jp-space-160) auto 0;
}

.jp-microphones__primary-card {
  min-height: 541px;
  display: grid;
  grid-template-columns: 471px minmax(0, 1fr);
  gap: var(--jp-space-40);
  align-items: center;
  padding: var(--jp-space-40) 80px var(--jp-space-40) 47px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box;
}

.jp-media-slot--microphones {
  width: 100%;
  aspect-ratio: 471 / 453;
  align-self: end;
}

.jp-microphones__content {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-24);
  min-width: 0;
}

.jp-microphones__intro {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-24);
}

.jp-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-4);
}

.jp-stats-list p {
  position: relative;
  padding-left: 18px;
  color: #fff;
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
}

.jp-stats-list p::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
}

.jp-feature-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jp-space-40);
  margin-top: var(--jp-space-24);
}

.jp-feature-card {
  min-width: 0;
}

.jp-feature-card__media {
  width: 100%;
  aspect-ratio: 540 / 400;
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box;
}

.jp-feature-card__media .jp-media-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.jp-feature-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-12);
  margin-top: var(--jp-space-48);
}

/* Keep feature-card body copy slightly narrower than the media/card width.
   Titles stay aligned to the card edge; paragraphs use a shorter reading measure. */
.jp-feature-card__copy p {
  width: min(480px, 92%);
}

/* ---------- Interface ---------- */
.jp-section--interface {
  padding: 40px 0 var(--jp-section-pad);
}

.jp-ui-overview {
  position: relative;
  width: min(var(--jp-content), calc(100% - 160px));
  min-height: 654px;
  margin: var(--jp-header-content-gap) auto 0;
  padding: var(--jp-space-48) var(--jp-space-80) var(--jp-space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box;
}

.jp-ui-carousel {
  position: relative;
  width: min(724px, 100%);
  aspect-ratio: 724 / 407;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 30px;
}

.jp-ui-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.jp-ui-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.jp-ui-slide .jp-media-image {
  object-fit: cover;
}

.jp-ui-captions {
  position: relative;
  z-index: 2;
  width: min(var(--jp-measure-media-caption), 100%);
  min-height: calc(var(--jp-body-support-line) * 3);
  margin-top: var(--jp-media-copy-gap);
  display: flex;
  align-items: center;
}

.jp-ui-caption {
  display: none;
  width: 100%;
  color: var(--jp-muted);
  font-size: var(--jp-body-support);
  line-height: var(--jp-body-support-line);
  text-align: center;
}

.jp-ui-caption.is-active {
  display: block;
}

.jp-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: var(--jp-control-gap);
}

.jp-dots button {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,.24);
}

.jp-dots button.is-active { background: #fff; }

.jp-dots button:focus-visible {
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 3px;
}

.jp-dsp-header {
  margin-top: var(--jp-space-160);
}

.jp-interface-detail {
  width: min(var(--jp-content), calc(100% - 160px));
  aspect-ratio: 16 / 9;
  margin: var(--jp-space-24) auto 0;
}

.jp-dsp-carousel-shell {
  /* Figma Desktop — 1440: carousel frame is 1212px inside the 1280px stage,
     which produces the same 34px outer inset on both sides. Do not extend this
     track to the browser edge. */
  width: calc(100% - 68px);
  margin: var(--jp-space-80) 34px 0;
  overflow: hidden;
}

.jp-dsp-carousel {
  width: 100%;
  display: flex;
  gap: var(--jp-space-24);
  padding-left: 0;
  padding-right: var(--jp-space-80);
  scroll-padding-left: 0;
  scroll-padding-right: var(--jp-space-80);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
}

.jp-dsp-carousel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.jp-dsp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--jp-space-24);
}

.jp-dsp-dots button {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,.28);
  transition: transform .2s ease, background-color .2s ease;
}

.jp-dsp-dots button.is-active {
  background: #fff;
  transform: scale(1.12);
}

.jp-dsp-dots button:focus-visible {
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 3px;
}

.jp-dsp-card {
  flex: 0 0 616px;
  height: 630px;
  padding: var(--jp-space-40);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  border-radius: 30px;
  background: #0d0d0d;
}

.jp-dsp-card__media {
  width: 100%;
  aspect-ratio: 536 / 302;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 22px;
}

.jp-dsp-card__copy {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-12);
  margin-top: var(--jp-space-64);
}


/* ---------- Convenience rows ---------- */
.jp-convenience-header {
  margin-top: var(--jp-space-160);
}


.jp-convenience-header h2 {
  font-size: var(--jp-h2);
  line-height: var(--jp-h2-line);
  font-weight: 700;
  letter-spacing: -.015em;
}

.jp-convenience-list {
  width: min(var(--jp-content), calc(100% - 160px));
  margin: var(--jp-space-120) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-40);
}

.jp-convenience-row {
  width: 100%;
  min-height: 330px;
  display: grid;
  grid-template-columns: 562px minmax(0, 1fr);
  gap: var(--jp-space-64);
  align-items: center;
}

.jp-convenience-row--reverse {
  grid-template-columns: minmax(0, 1fr) 562px;
}

.jp-convenience-row__media {
  width: 562px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Convenience artwork is authored as square feature art. Preserve the entire
   composition instead of cropping it into the former landscape slot. */
.jp-convenience-row__media .jp-media-image {
  object-fit: contain;
  object-position: center;
}

.jp-convenience-row__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-12);
}

.jp-convenience-row__copy h3 {
  color: #fff;
  font-size: var(--jp-h4);
  line-height: var(--jp-h4-line);
  font-weight: 600;
  letter-spacing: -.005em;
}

.jp-convenience-row__copy p {
  color: var(--jp-muted);
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
}

/* ========================================================================== */
/* Tablet — reference frame 1024                                               */
/* ========================================================================== */
@media (max-width: 1100px) {
  .jp-prox {
    --jp-stage: 1024px;
    --jp-page-gutter: 40px;
    --jp-section-pad: 96px;
    --jp-compact-pad: 64px;
    --jp-grid-gap: 24px;
    --jp-content-gap: 28px;
    --jp-stack-gap: 20px;
    --jp-header-content-gap: 32px;
    --jp-media-copy-gap: 40px;
    --jp-control-gap: 24px;

    --jp-h1: 56px;
    --jp-h1-line: 64px;
    --jp-h2: 44px;
    --jp-h2-line: 52px;
    --jp-h3: 32px;
    --jp-h3-line: 40px;
    --jp-h4: 26px;
    --jp-h4-line: 34px;
    --jp-body-l: 18px;
    --jp-body-l-line: 30px;
    --jp-body-m: 16px;
    --jp-body-m-line: 26px;
    --jp-body-support: 18px;
    --jp-body-support-line: 30px;
    --jp-label: 13px;
    --jp-label-line: 18px;
  }

  .jp-section-header,
  .jp-spatial-header,
  .jp-overview-intro,
  .jp-overview,
  .jp-sound-layout,
  .jp-microphones,
  .jp-ui-overview,
  .jp-interface-detail {
    width: min(944px, calc(100% - 80px));
  }

  .jp-section-header--left,
  .jp-spatial-header,
  .jp-feature-copy--wide { margin-left: 40px; }

  .jp-section--hero { padding-top: var(--jp-section-pad); }

  .jp-hero {
    width: min(944px, calc(100% - 80px));
  }

  .jp-hero h1 { margin-top: var(--jp-space-64); }
  .jp-media-slot--hero { margin-top: var(--jp-space-64); }
  .jp-hero-video {
    width: calc(100% - 80px);
    margin-top: var(--jp-section-pad);
  }
  .jp-overview { margin-top: var(--jp-space-64); }

  .jp-overview-row { gap: var(--jp-space-24); }
  .jp-overview-card--secondary { padding: 0; }
  .jp-overview-card--secondary .jp-feature-copy { left: 32px; top: 32px; width: 78%; max-width: calc(100% - 64px); }
  .jp-overview-card__media--subwoofer { left: 50%; bottom: -8px; width: 63.52%; height: 77.25%; transform: translateX(-50%); }
  .jp-overview-card__media--microphones { left: 50%; bottom: -8px; width: 55%; height: 66%; transform: translateX(-50%); }

  .jp-feature-copy--overview-main {
    left: 53%;
    width: 42%;
  }

  .jp-media-slot--design {
    width: calc(100% - 80px);
    margin-top: var(--jp-space-64);
  }

  .jp-design-body { width: min(760px, calc(100% - 80px)); }

  .jp-sound-layout {
    position: relative;
    width: min(944px, calc(100% - 80px));
    height: auto;
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto;
    column-gap: var(--jp-space-32);
    row-gap: var(--jp-space-24);
    align-items: center;
  }

  .jp-technical-copy {
    position: relative;
    inset: auto;
    width: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .jp-sound-spec {
    position: relative;
    inset: auto;
    width: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .jp-media-slot--sound-architecture {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 738 / 492;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .jp-feature-copy--wide { width: min(var(--jp-measure-spatial), calc(100% - 80px)); }

  .jp-media-slot--downfiring { width: min(600px, calc(100% - 80px)); }

  .jp-microphones__primary-card {
    min-height: auto;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    gap: var(--jp-space-32);
    padding: var(--jp-space-40);
  }

  .jp-feature-card-row { gap: var(--jp-space-24); }
  .jp-feature-card__copy { margin-top: var(--jp-space-40); }

  .jp-ui-overview {
    min-height: 620px;
    padding: var(--jp-space-48) var(--jp-space-64) var(--jp-space-32);
  }
  .jp-ui-carousel { width: min(724px, 100%); }
  .jp-ui-captions { min-height: calc(var(--jp-body-l-line) * 4); }

  .jp-dsp-header { margin-top: var(--jp-section-pad); }

  .jp-dsp-carousel-shell {
    width: calc(100% - 40px);
    margin-left: 40px;
    margin-right: 0;
  }

  .jp-dsp-carousel {
    padding-right: 40px;
    scroll-padding-right: 40px;
  }

  .jp-dsp-card {
    flex-basis: min(616px, 72vw);
  }

  .jp-dsp-card__copy {
    margin-top: var(--jp-space-48);
  }

  .jp-convenience-list {
    width: min(944px, calc(100% - 80px));
  }

  .jp-convenience-row,
  .jp-convenience-row--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--jp-space-40);
    min-height: 280px;
  }

  .jp-convenience-row__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ========================================================================== */
/* Mobile — reference frame 390                                                */
/* ========================================================================== */
@media (max-width: 760px) {
  .jp-prox__stage { width: 100%; }

  .jp-prox {
    --jp-stage: 390px;
    --jp-page-gutter: 20px;
    --jp-section-pad: 96px;
    --jp-compact-pad: 80px;
    --jp-grid-gap: 16px;
    --jp-content-gap: 28px;
    --jp-stack-gap: 20px;
    --jp-header-content-gap: 32px;
    --jp-media-copy-gap: 40px;
    --jp-control-gap: 28px;

    --jp-h1: 40px;
    --jp-h1-line: 46px;
    --jp-h2: 32px;
    --jp-h2-line: 40px;
    --jp-h3: 26px;
    --jp-h3-line: 34px;
    --jp-h4: 22px;
    --jp-h4-line: 30px;
    --jp-body-l: 18px;
    --jp-body-l-line: 28px;
    --jp-body-m: 16px;
    --jp-body-m-line: 26px;
    --jp-body-support: 16px;
    --jp-body-support-line: 26px;
    --jp-label: 12px;
    --jp-label-line: 18px;
  }

  .jp-section-header,
  .jp-spatial-header,
  .jp-overview-intro,
  .jp-overview,
  .jp-sound-layout,
  .jp-microphones,
  .jp-ui-overview,
  .jp-interface-detail {
    width: calc(100% - 40px);
  }

  .jp-section-header--left,
  .jp-section-header--center,
  .jp-spatial-header {
    margin-inline: 20px;
    align-items: flex-start;
    text-align: left;
  }

  .jp-section-header h2,
  .jp-spatial-header h2 { width: 100%; }

  .jp-section--hero { padding-top: var(--jp-section-pad); }

  .jp-hero {
    width: calc(100% - 40px);
  }

  .jp-brand-logo {
    width: min(240px, 68vw);
    height: auto;
    aspect-ratio: 304 / 52;
  }
  .jp-brand { font-size: var(--jp-label); }
  .jp-hero h1 { margin-top: var(--jp-space-48); }
  .jp-hero__subtitle { margin-top: var(--jp-space-12) !important; }
  .jp-media-slot--hero { margin-top: var(--jp-space-48); }
  .jp-hero-video {
    width: calc(100% - 40px);
    margin-top: var(--jp-space-64);
    border-radius: 20px;
  }

  .jp-overview-intro {
    margin-top: var(--jp-space-64);
  }

  .jp-overview { margin-top: var(--jp-space-48); }

  .jp-overview-card--featured {
    height: auto;
    min-height: 430px;
    padding: var(--jp-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--jp-space-24);
  }

  .jp-feature-copy--overview-main {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    order: 1;
  }

  .jp-overview-card__media--featured {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 332;
  }

  .jp-overview-row {
    grid-template-columns: 1fr;
    gap: var(--jp-space-16);
    margin-top: var(--jp-space-16);
  }

  .jp-overview-card--secondary {
    height: 380px;
    padding: 0;
  }

  .jp-overview-card--secondary .jp-feature-copy { left: 24px; top: 24px; width: calc(100% - 48px); max-width: none; }
  .jp-overview-card__media--subwoofer { bottom: -8px; width: 68%; height: 70%; }
  .jp-overview-card__media--microphones { bottom: -8px; width: 61%; height: 59%; }

  .jp-section--design,
  .jp-section--sound,
  .jp-section--spatial,
  .jp-section--interface { padding-top: var(--jp-compact-pad); }

  .jp-media-slot--design {
    width: calc(100% - 40px);
    margin-top: var(--jp-space-48);
  }

  .jp-design-body {
    width: calc(100% - 40px);
    margin-top: var(--jp-space-24);
  }

  .jp-sound-layout {
    width: calc(100% - 40px);
    height: auto;
    margin: var(--jp-space-48) auto 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--jp-space-32);
  }

  .jp-technical-copy {
    position: relative;
    inset: auto;
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    gap: 0;
  }

  .jp-media-slot--sound-architecture {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 738 / 492;
    grid-column: 1;
    grid-row: 1;
  }

  .jp-sound-spec {
    position: relative;
    inset: auto;
    width: 100%;
    grid-column: 1;
    grid-row: 3;
    margin: 0 !important;
    color: #fff;
  }

  .jp-spatial-header h2 {
    font-size: var(--jp-h2);
    line-height: var(--jp-h2-line);
    font-weight: 700;
    letter-spacing: -.015em;
    white-space: normal;
  }

  /* Mobile title rhythm: exactly two semantic lines —
     “Sound From Above” / “You, And Below”. */
  .jp-spatial-title-break {
    display: block;
  }

  .jp-spatial-feature { margin-top: var(--jp-section-pad); }

  .jp-feature-copy--wide {
    width: calc(100% - 40px);
    margin-left: 20px;
  }

  .jp-media-slot--upfiring { margin-top: var(--jp-space-24); }

  .jp-spatial-feature--down { margin-top: var(--jp-space-64); }

  .jp-media-slot--downfiring {
    width: calc(100% - 80px);
    margin-top: var(--jp-space-32);
  }

  .jp-microphones {
    margin-top: var(--jp-section-pad);
  }

  .jp-microphones__primary-card {
    grid-template-columns: 1fr;
    gap: var(--jp-space-32);
    padding: var(--jp-space-24);
  }

  .jp-media-slot--microphones {
    width: 78%;
    margin-inline: auto;
  }

  .jp-microphones__content { gap: var(--jp-space-24); }
  .jp-microphones__intro { gap: var(--jp-space-16); }

  .jp-feature-card-row {
    grid-template-columns: 1fr;
    gap: var(--jp-space-48);
    margin-top: var(--jp-space-48);
  }

  .jp-feature-card__media { padding: 28px 36px; }
  .jp-feature-card__copy { margin-top: var(--jp-space-24); }

  /* On mobile these captions sit in the same reading column as the other
     feature body copy. Remove the desktop-only inset so their right edge
     aligns with the page text system while retaining the shared 20px gutter. */
  .jp-feature-card__copy p {
    width: 100%;
    max-width: 100%;
  }

  .jp-ui-overview {
    min-height: auto;
    margin-top: var(--jp-header-content-gap);
    padding: var(--jp-space-24);
  }

  .jp-ui-carousel {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .jp-ui-captions {
    min-height: calc(var(--jp-body-support-line) * 5);
    margin-top: var(--jp-media-copy-gap);
  }

  .jp-ui-caption {
    text-align: center;
  }
  .jp-dots {
    align-self: center;
    margin-top: var(--jp-control-gap);
  }

  .jp-dsp-header { margin-top: var(--jp-section-pad); }

  .jp-interface-detail {
    margin-top: var(--jp-space-24);
  }

  .jp-dsp-carousel-shell {
    width: calc(100% - 20px);
    margin: var(--jp-space-48) 0 0 20px;
  }

  .jp-dsp-carousel {
    padding-right: 20px;
    scroll-padding-right: 20px;
    gap: var(--jp-space-16);
  }

  .jp-dsp-card {
    flex-basis: calc(100vw - 52px);
    max-width: 520px;
    height: auto;
    min-height: 470px;
    padding: var(--jp-space-24);
  }

  .jp-dsp-card__copy {
    width: 100%;
    margin-top: var(--jp-space-24);
  }

  .jp-convenience-header {
    margin-top: var(--jp-section-pad);
  }

  .jp-convenience-list {
    width: calc(100% - 40px);
    margin-top: var(--jp-space-64);
    gap: var(--jp-space-64);
  }

  .jp-convenience-row,
  .jp-convenience-row--reverse {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--jp-space-24);
  }

  .jp-convenience-row--reverse .jp-convenience-row__copy {
    order: 2;
  }

  .jp-convenience-row--reverse .jp-convenience-row__media {
    order: 1;
  }

  .jp-convenience-row__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Supporting copy remains visually subordinate across small screens. */
@media (max-width: 760px) {
  .jp-supporting-copy,
  .jp-design-body .jp-body-large,
  .jp-ui-caption {
    font-size: var(--jp-body-support);
    line-height: var(--jp-body-support-line);
  }

  /* Presence of Power supporting copy follows the mobile reading flow. */
  .jp-supporting-copy {
    text-align: left;
    margin-inline: 0;
  }
}

/* Semantic text measures stay consistent across breakpoints; only available
   container width changes. This prevents arbitrary subtitle lengths. */
@media (max-width: 1100px) {
  .jp-section-intro,
  .jp-supporting-copy {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .jp-section-intro,
  .jp-supporting-copy {
    width: 100%;
  }
}

/* Extra-narrow phones: keep readable gutters without introducing a new layout. */
@media (max-width: 420px) {
  .jp-overview-card--secondary { height: 360px; }
  .jp-overview-card__media--subwoofer { bottom: -6px; width: 72%; height: 65%; }
  .jp-overview-card__media--microphones { bottom: -6px; width: 64%; height: 56%; }
  .jp-microphones__primary-card { padding-inline: var(--jp-space-20); }
}

@media (prefers-reduced-motion: reduce) {
  .jp-prox *,
  .jp-prox *::before,
  .jp-prox *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* V5.0.1 consistency safeguards */
.jp-dsp-carousel {
  scrollbar-color: transparent transparent !important;
}
.jp-dsp-carousel::-webkit-scrollbar,
.jp-dsp-carousel::-webkit-scrollbar-track,
.jp-dsp-carousel::-webkit-scrollbar-thumb {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
.jp-dsp-card__copy h3,
.jp-dsp-card__copy p {
  width: 100%;
  max-width: none;
}


/* V5.0.20 — final consistency corrections
   These scoped overrides intentionally sit after all responsive rules. */

/* Featured cards use the same visual surface as their secondary cards. */
body.jp-prox-preview-page .jp-prox .jp-overview-card,
body.jp-prox-preview-page .jp-prox .jp-overview-card--secondary,
body.jp-prox-preview-page .jp-prox .jp-microphones__primary-card,
body.jp-prox-preview-page .jp-prox .jp-feature-card__media {
  background:
    linear-gradient(180deg, #000 28.8%, rgba(26, 1, 64, .50) 100%) padding-box,
    linear-gradient(180deg, #1c0153 0%, #060339 100%) border-box !important;
}

/* Interface-carousel caption is a centered caption inside the card at every breakpoint. */
body.jp-prox-preview-page .jp-prox .jp-ui-overview .jp-ui-caption {
  text-align: center !important;
}

@media (max-width: 760px) {
  /* Presence of Power secondary/supporting copy: same left reading edge as mobile body copy.
     This selector intentionally outranks the desktop .jp-design-body .jp-body-large rule. */
  body.jp-prox-preview-page .jp-prox .jp-design-body .jp-body-large.jp-supporting-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    text-align: left !important;
  }
}


/* V5.0.28 — seamless slow silver sweep across all three driver labels
   Base text remains permanently visible. The sheen itself is phased across
   label 1 → label 2 → label 3 with no dead time between labels. */
.jp-sound-spec__item {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, .76);
  opacity: 1;
  white-space: nowrap;
}

.jp-sound-spec__separator {
  color: rgba(255, 255, 255, .28);
}

.jp-sound-spec__item::after {
  content: attr(data-jp-label);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #f5f6f7;
  -webkit-text-fill-color: #f5f6f7;
  opacity: 0;

  /* Narrow silver sheen only; the underlying label never changes. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .12) 18%,
    rgba(0, 0, 0, .72) 42%,
    #000 50%,
    rgba(0, 0, 0, .72) 58%,
    rgba(0, 0, 0, .12) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .12) 18%,
    rgba(0, 0, 0, .72) 42%,
    #000 50%,
    rgba(0, 0, 0, .72) 58%,
    rgba(0, 0, 0, .12) 82%,
    transparent 100%
  );
  -webkit-mask-size: 30% 100%;
  mask-size: 30% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;

  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .08));
}

/*
 * One 24s master cycle = ~8s per label.
 * There is no pause: the next label begins on the exact frame the previous
 * label reaches its right edge. Change 24s here if you want to speed up or
 * slow down the complete three-label cycle.
 */
.jp-sound-spec.is-running .jp-sound-spec__item:nth-child(1)::after {
  animation: jpSoundSpecSilverSheen1 24s linear infinite;
}

.jp-sound-spec.is-running .jp-sound-spec__item:nth-child(3)::after {
  animation: jpSoundSpecSilverSheen2 24s linear infinite;
}

.jp-sound-spec.is-running .jp-sound-spec__item:nth-child(5)::after {
  animation: jpSoundSpecSilverSheen3 24s linear infinite;
}

@keyframes jpSoundSpecSilverSheen1 {
  0% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  33.333% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  33.334%, 100% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes jpSoundSpecSilverSheen2 {
  0%, 33.333% { opacity: 0; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  33.334% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  66.666% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  66.667%, 100% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes jpSoundSpecSilverSheen3 {
  0%, 66.666% { opacity: 0; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  66.667% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  100% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jp-sound-spec__item {
    color: rgba(255, 255, 255, .76);
  }

  .jp-sound-spec__item::after,
  .jp-sound-spec.is-running .jp-sound-spec__item::after {
    content: none;
    animation: none !important;
    opacity: 0;
    filter: none;
  }
}

/* V5.0.29 — latest Figma surface system + Convenience carousel
   -------------------------------------------------------------------------- */

/* Images 1–2: updated neutral dark card gradient and pale gradient stroke. */
body.jp-prox-preview-page .jp-prox .jp-overview-card,
body.jp-prox-preview-page .jp-prox .jp-overview-card--secondary,
body.jp-prox-preview-page .jp-prox .jp-microphones__primary-card,
body.jp-prox-preview-page .jp-prox .jp-feature-card__media {
  border: .5px solid #575757 !important;
  background: linear-gradient(90deg, #040404 0%, #0c0c0c 100%) !important;
}

/* Image 3: UI container keeps a longer black phase before the deep-indigo tail. */
body.jp-prox-preview-page .jp-prox .jp-ui-overview {
  border: .5px solid transparent !important;
  background:
    linear-gradient(to bottom, #000 0%, #000 34%, rgba(7, 0, 56, .50) 100%) padding-box,
    linear-gradient(to bottom, #171717 0%, #03011b 100%) border-box !important;
}

/* Desktop drag affordance for horizontally scrollable product carousels. */
.jp-dsp-carousel,
.jp-convenience-carousel {
  cursor: grab;
  -webkit-user-select: auto;
  user-select: auto;
}

.jp-dsp-carousel.is-dragging,
.jp-convenience-carousel.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* ---------- Convenience carousel ---------- */
.jp-convenience-carousel-shell {
  /* Match the DSP carousel's bounded desktop frame: 1212px inside the
     1280px stage, leaving an identical 34px visual gap on both sides. */
  width: calc(100% - 68px);
  margin: 60px 34px var(--jp-space-160);
  overflow: hidden;
}

.jp-convenience-carousel {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 21px;
  /* No asymmetric trailing spacer. At the two extremes the first/last card
     aligns to the carousel viewport, whose outer margins are symmetrical. */
  padding-left: 0;
  padding-right: 0;
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
}

.jp-convenience-carousel::-webkit-scrollbar,
.jp-convenience-carousel::-webkit-scrollbar-track,
.jp-convenience-carousel::-webkit-scrollbar-thumb {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.jp-convenience-card {
  flex: 0 0 507px;
  height: 340px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  border-radius: 30px;
  background: #060606;
}

.jp-convenience-card__icon,
.jp-convenience-card__icon--apps {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

.jp-convenience-card h3 {
  width: 100%;
  margin-top: 24px !important;
  color: #fff;
  font-size: var(--jp-h4);
  line-height: var(--jp-h4-line);
  font-weight: 600;
  letter-spacing: -.005em;
}

.jp-convenience-card p {
  width: 100%;
  margin-top: 24px !important;
  color: var(--jp-muted);
  /* Same body hierarchy as .jp-dsp-card__copy p. */
  font-size: var(--jp-body-m);
  line-height: var(--jp-body-m-line);
  font-weight: 400;
}

.jp-convenience-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-right: 0;
}

.jp-carousel-arrow {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
  appearance: none;
  background: #111;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}

.jp-carousel-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jp-carousel-arrow:hover:not(:disabled) {
  background: #1a1a1a;
}

.jp-carousel-arrow:active:not(:disabled) {
  transform: scale(.96);
}

.jp-carousel-arrow:focus-visible {
  outline: 2px solid rgba(224, 234, 252, .8);
  outline-offset: 3px;
}

.jp-carousel-arrow:disabled {
  opacity: .30;
  cursor: default;
}

@media (max-width: 1100px) {
  .jp-convenience-carousel-shell {
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: var(--jp-space-120);
  }

  .jp-convenience-card {
    flex-basis: min(507px, 62vw);
    height: 390px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .jp-convenience-card__icon,
  .jp-convenience-card__icon--apps {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .jp-convenience-card p {
    font-size: var(--jp-body-m);
    line-height: var(--jp-body-m-line);
  }
}

@media (max-width: 760px) {
  .jp-convenience-carousel-shell {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 48px;
    margin-bottom: var(--jp-space-96);
  }

  .jp-convenience-carousel {
    gap: 16px;
  }

  .jp-convenience-card {
    flex-basis: calc(100vw - 52px);
    max-width: 420px;
    height: auto;
    min-height: 350px;
    padding: 32px 24px 36px;
  }

  .jp-convenience-card__icon,
  .jp-convenience-card__icon--apps {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .jp-convenience-card h3 {
    margin-top: 20px !important;
    font-size: 24px;
    line-height: 32px;
  }

  .jp-convenience-card p {
    margin-top: 16px !important;
    font-size: 16px;
    line-height: 26px;
  }

  .jp-convenience-controls {
    margin-top: 20px;
    gap: 10px;
  }

  .jp-carousel-arrow {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}



/* V5.0.33 — Apple/Google-style full-width carousel gutters
   --------------------------------------------------------------------------
   Horizontal feature shelves should not inherit the narrow centered content
   column on wide screens. Use a modest responsive viewport gutter instead.

   At every breakpoint:
   - first card left edge = viewport gutter
   - last card right edge = the same viewport gutter
   - intermediate cards may peek into view naturally
   - DSP and Convenience use the same outer-gutter system
*/
.jp-prox {
  --jp-carousel-edge-gutter: clamp(20px, 3.333vw, 64px);
}

.jp-dsp-carousel-shell,
.jp-convenience-carousel-shell {
  width: calc(100vw - var(--jp-carousel-edge-gutter) - var(--jp-carousel-edge-gutter));
  margin-left: calc(50% - 50vw + var(--jp-carousel-edge-gutter));
  margin-right: 0;
  overflow: hidden;
}

.jp-dsp-carousel-shell {
  margin-top: var(--jp-space-80);
}

.jp-convenience-carousel-shell {
  margin-top: 60px;
  margin-bottom: var(--jp-space-160);
}

.jp-dsp-carousel,
.jp-convenience-carousel {
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

/* Same card-to-card rhythm for the two horizontal shelves. */
.jp-convenience-carousel {
  gap: var(--jp-space-24);
}

/* Controls terminate on the same right-hand viewport gutter as the cards. */
.jp-convenience-controls {
  padding-right: 0;
}

@media (max-width: 1100px) {
  .jp-convenience-carousel-shell {
    margin-bottom: var(--jp-space-120);
  }
}

@media (max-width: 760px) {
  .jp-dsp-carousel-shell,
  .jp-convenience-carousel-shell {
    margin-left: calc(50% - 50vw + var(--jp-carousel-edge-gutter));
    margin-right: 0;
  }

  .jp-dsp-carousel-shell {
    margin-top: var(--jp-space-48);
  }

  .jp-convenience-carousel-shell {
    margin-top: var(--jp-space-48);
    margin-bottom: var(--jp-space-96);
  }

  .jp-dsp-carousel,
  .jp-convenience-carousel {
    gap: var(--jp-space-16);
  }
}


/* V5.0.34 — content-led / right-full-bleed carousel geometry + outline DSP cards
   --------------------------------------------------------------------------
   Desktop follows the Figma shelf proportion more closely: the first card has
   a deliberate content-side inset (≈114px on a 1440px canvas, capped at 152px
   on very wide screens), while the carousel viewport continues to the physical
   right edge of the browser. The same inset is retained as trailing space at
   the final scroll position. */
.jp-prox {
  --jp-carousel-start-gutter: clamp(40px, 7.92vw, 152px);
}

.jp-dsp-carousel-shell,
.jp-convenience-carousel-shell {
  width: calc(100vw - var(--jp-carousel-start-gutter)) !important;
  margin-left: calc(50% - 50vw + var(--jp-carousel-start-gutter)) !important;
  margin-right: 0 !important;
  overflow: hidden;
}

/* No duplicate leading padding: the shell itself creates the initial inset.
   The trailing padding recreates that same amount of breathing room at the end. */
.jp-dsp-carousel,
.jp-convenience-carousel {
  padding-left: 0 !important;
  padding-right: var(--jp-carousel-start-gutter) !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: var(--jp-carousel-start-gutter) !important;
}

/* Updated Figma treatment: DSP cards are outline-only, using the same
   0.5px neutral stroke as the other product cards. */
.jp-dsp-card {
  border: .5px solid #575757 !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  .jp-prox {
    --jp-carousel-start-gutter: 20px;
  }
}


/* V5.0.35 — latest Figma border system
   Product/feature cards now use a single 0.5px #575757 stroke.
   No gradient-border treatment is used on these cards. */


/* V5.0.36 — unified subtle card border, clearer Convenience cards, inset controls
   -------------------------------------------------------------------------- */
.jp-prox {
  /* One neutral border token for product cards and carousel cards. At 0.5px,
     this remains visible on black without becoming a decorative outline. */
  --jp-card-stroke: rgba(255, 255, 255, .12);
  --jp-convenience-card-bg: #101010;
  --jp-convenience-control-inset: clamp(64px, 6.5vw, 112px);
}

/* Use the same restrained 0.5px border everywhere in the product-card system. */
body.jp-prox-preview-page .jp-prox .jp-overview-card,
body.jp-prox-preview-page .jp-prox .jp-overview-card--secondary,
body.jp-prox-preview-page .jp-prox .jp-microphones__primary-card,
body.jp-prox-preview-page .jp-prox .jp-feature-card__media,
.jp-prox .jp-dsp-card,
.jp-prox .jp-convenience-card {
  border: .5px solid var(--jp-card-stroke) !important;
}

/* DSP remains stroke-only as in the latest Figma treatment. */
.jp-prox .jp-dsp-card {
  background: transparent !important;
}

/* Convenience cards need a real dark-grey surface so each card is readable
   against the page's pure black background without becoming visually heavy. */
.jp-prox .jp-convenience-card {
  background: var(--jp-convenience-card-bg) !important;
}

/* Apple-like placement: keep controls near the end of the shelf, but inset
   enough that they do not visually stick to the physical viewport edge. */
.jp-prox .jp-convenience-controls {
  padding-right: var(--jp-convenience-control-inset) !important;
}

@media (max-width: 1100px) {
  .jp-prox {
    --jp-convenience-control-inset: 48px;
  }
}

@media (max-width: 760px) {
  .jp-prox {
    --jp-convenience-control-inset: 20px;
  }
}


/* V5.0.37 — mobile-safe major-title gradient
   --------------------------------------------------------------------------
   Keep the same title rendering path at every breakpoint. Mobile WebKit can
   fall back to the element's text fill unless -webkit-text-fill-color is
   explicitly transparent. The scoped !important declarations also prevent
   responsive heading colors from the active WordPress theme from overriding
   the product-page gradient. */
.jp-prox .jp-hero h1,
.jp-prox .jp-section-header h2,
.jp-prox .jp-spatial-header h2 {
  background-image: linear-gradient(90deg, var(--jp-title-a), var(--jp-title-b)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}


/* V5.0.40 — hero video sound control + tighter Convenience cards */
@media (max-width: 760px) {
  .jp-hero-video__sound {
    right: 14px;
    bottom: 14px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  .jp-hero-video__play {
    min-height: 42px;
    padding: 0 15px;
    font-size: 12px;
  }
}

/* V5.0.41 — mobile hero video playback hardening */