/* ELP5 PRO-VCI product page. Extends the final homepage stylesheet. */
.product-page {
  --product-hero-content-offset: calc(var(--space-xxl) + var(--space-xl) + var(--space-l));
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 173, 227, .12), transparent 34%),
    radial-gradient(circle at 8% 32%, rgba(122, 85, 164, .11), transparent 30%),
    var(--surface-window);
}

.product-page .nav a[aria-current="page"] { color: var(--text-primary); }
.product-page .elp-product { overflow: clip; }
.product-page .container:not(.site-header__bar) { width: min(var(--container), calc(100% - (2 * var(--gutter)))); }

.product-hero {
  position: relative;
  display: block;
  min-height: 650px;
  padding: 0;
  gap: 0;
  align-items: initial;
  overflow: hidden;
  border-bottom: 1px solid var(--border-strong);
  background:
    radial-gradient(50% 80% at 81% 36%, rgba(0, 173, 227, .22), transparent 72%),
    linear-gradient(112deg, rgba(14, 20, 32, .98) 0%, rgba(11, 22, 35, .94) 53%, rgba(4, 43, 72, .72) 100%);
}

.product-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .8;
  background:
    linear-gradient(90deg, rgba(14, 20, 32, 1) 0%, rgba(14, 20, 32, .93) 34%, rgba(14, 20, 32, .43) 72%, rgba(14, 20, 32, .68) 100%),
    linear-gradient(180deg, rgba(14, 20, 32, .12), rgba(14, 20, 32, .74)),
    url("../assets/images/bg2.png") center / cover no-repeat;
  filter: contrast(1.08) saturate(.72);
}

.product-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  min-height: 535px;
  gap: clamp(36px, 6vw, 92px);
}

.product-hero__copy {
  align-self: start;
  padding-block: var(--product-hero-content-offset) 0;
}

.breadcrumbs { display: flex; gap: 10px; margin-bottom: 38px; color: var(--text-faint); font-size: 12px; letter-spacing: .05em; }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.product-kicker {
   display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0 0 var(--space-xl);
  color: var(--accent);
  font-size: var(--font-caption);
  font-weight: 600;
  letter-spacing: calc(var(--tracking) * 2);
  text-transform: uppercase;
}
.product-kicker i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 13px rgba(69, 209, 138, .65); }



.product-hero h1,
.product-heading h2,
.drawing-copy h2,
.product-cta h2 {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--font-weight-heading);  
  line-height: 1.2;
}
.product-hero h1 { font-size: clamp(44px, 4.8vw, 62px); }
.product-hero h1 span,
.product-heading h2 span,
.drawing-copy h2 span {
  background: linear-gradient(90deg, var(--pink-500), var(--purple-500) 50%, var(--cyan-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.product-hero__lead { max-width: 670px; margin: 28px 0 0; color: var(--text-secondary); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.7; }
.product-hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.product-text-link { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.product-text-link:hover { color: var(--text-primary); }

.product-hero__visual { position: relative; align-self: stretch; display: grid; place-items: end center; min-width: 0; }
.product-hero__visual img { position: relative; z-index: 1; display: block; width: min(84%, 400px); max-height: 800px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .6)); }
.product-hero__halo { position: absolute; width: 530px; height: 530px; left: 50%; top: 50%; translate: -50% -43%; border-radius: 50%; background: radial-gradient(circle, rgba(39, 170, 225, .34), rgba(0, 114, 188, .13) 38%, transparent 68%); }

/* Shared header for information pages */
.utility-hero {
  min-height: 535px;
}
.utility-hero .product-hero__pattern {
  opacity: .20;
  background: url("../assets/images/bg5.png") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 35%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 35%, #000 100%);
  filter: none;
}
.utility-hero .product-hero__inner {
  grid-template-columns: minmax(0, 820px);
  min-height: 535px;
}
.support-page .utility-hero .product-hero__inner {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-xxl);
}
.support-hero-preview {
  position: relative;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding-block: var(--space-xxl);
  isolation: isolate;
}
.support-hero-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse, var(--glow-accent), transparent 70%);
  filter: blur(var(--space-xl));
  pointer-events: none;
}
.support-hero-preview__screen {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel-ui);
  box-shadow: 0 var(--space-xl) calc(var(--space-xxl) * 2) var(--shadow-tint);
}
.support-hero-preview__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.support-hero-preview figcaption {
  margin-top: var(--space-xl);
  color: var(--text-primary);
  font-size: var(--font-title);
  font-weight: 500;
  text-align: center;
}
.support-hero-preview figcaption span { color: var(--text-secondary); }
.contact-page .utility-hero .product-hero__inner {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-xxl);
}
.contact-hero-brand {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  isolation: isolate;
  min-width: 0;
  min-height: 280px;
  padding: var(--space-xxl);
}
.contact-hero-brand::before,
.contact-hero-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.contact-hero-brand::before {
  background: url("../assets/images/bg5.png") center / cover no-repeat;
  opacity: .16;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
}
.contact-hero-brand::after { display: none; }
.contact-hero-brand img { display: block; width: 100%; max-width: 360px; height: auto; }
@media (max-width: 820px) {
  .contact-page .utility-hero .product-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .contact-hero-brand { width: 100%; max-width: 480px; justify-self: center; min-height: 240px; }
}
.support-page #troubleshooting { isolation: isolate; }
.support-page #troubleshooting::before {
  content: "";
  position: absolute;
  inset: var(--space-xxl) 0;
  z-index: -1;
  pointer-events: none;
  background: url("../assets/images/elp5_pro_vci-800.webp") right center / auto 90% no-repeat;
  opacity: .16;
}
.support-page #faq { isolation: isolate; }
.support-page #faq::before,
.support-page #service .cta-panel::before {
  content: "?";
  position: absolute;
  right: var(--space-xxl);
  top: 50%;
  z-index: -1;
  transform: translateY(-50%) rotate(8deg);
  color: var(--accent);
  font-size: clamp(240px, 32vw, 480px);
  font-weight: 600;
  line-height: 1;
  opacity: .1;
  pointer-events: none;
}
.support-page #faq::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -1;
  width: min(40vw, 480px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 var(--space-xxl) var(--action-tint), 0 0 0 calc(var(--space-xxl) * 2) var(--action-tint);
  opacity: .14;
  pointer-events: none;
}
.support-page .support-heading-gradient {
  width: fit-content;
  background: linear-gradient(90deg, var(--pink-500), var(--purple-500) 50%, var(--cyan-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 820px) {
  .support-page .utility-hero .product-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .support-hero-preview { width: 100%; max-width: 640px; justify-self: center; }
}
.product-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 112px;
  margin-bottom: 0;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: var(--radius-panel-ui) var(--radius-panel-ui) 0 0;
  background: rgba(10, 20, 33, .84);
  backdrop-filter: blur(18px);
}
.product-facts > div { display: flex; flex-direction: column; justify-content: center; padding: 22px 30px; border-right: 1px solid var(--border-strong); }
.product-facts > div:last-child { border-right: 0; }
.product-facts dt { margin-bottom: 7px; color: var(--text-faint); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.product-facts dd { margin: 0; color: var(--text-primary); font-family: "Poppins", "Poppins", sans-serif; font-size: 18px; font-weight: 600; }

.product-subnav { position: sticky; top: var(--header-h); z-index: 8; padding: 7px 0; border-bottom: 1px solid var(--border-strong); background: rgba(10, 15, 25, .92); backdrop-filter: blur(18px); }
.product-subnav .container { display: flex; justify-content: center; gap: clamp(14px, 2.8vw, 42px); min-height: 46px; align-items: center; }
.product-subnav a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 8px 5px; border-radius: 4px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .075em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color .22s ease, background-color .22s ease; }
.product-subnav a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .28; transition: opacity .22s ease, box-shadow .22s ease, scale .22s ease; }
.product-subnav a::after { content: ""; position: absolute; right: 5px; bottom: 1px; left: 5px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transform: scaleX(.25); transition: opacity .22s ease, transform .22s ease; }
.product-subnav a:hover { background: rgba(255, 255, 255, .025); color: var(--text-primary); }
.product-subnav a:hover::before { opacity: .78; scale: 1.2; }
.product-subnav a:hover::after { opacity: .5; transform: scaleX(1); }
.product-subnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; color: var(--text-primary); }
.product-subnav a.is-active { background: rgba(39, 170, 225, .045); color: var(--text-primary); }
.product-subnav a.is-active::before { opacity: 1; scale: 1.25; box-shadow: 0 0 10px var(--glow-accent); }
.product-subnav a.is-active::after { opacity: .82; transform: scaleX(1); }

.product-section { position: relative; padding: clamp(84px, 7vw, 112px) 0; scroll-margin-top: calc(var(--header-h) + 70px); }
.product-section + .product-section { border-top: 1px solid rgba(165, 178, 204, .09); }
.product-heading { max-width: 830px; margin-bottom: clamp(42px, 4vw, 58px); }
.product-heading--center { margin-inline: auto; text-align: center; }
.product-heading--center .product-kicker { justify-content: center; }
.product-heading h2,
.drawing-copy h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.1; }
.product-heading > p:last-child,
.drawing-copy > p { max-width: 720px; margin: 28px 0 0; color: var(--text-secondary); font-size: 17px; line-height: 1.7; }
.product-heading--center > p:last-child { margin-inline: auto; }

.product-flow { isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(8, 15, 25, .42), rgba(8, 15, 25, .92)); }
.product-flow::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/images/bg5.png") right center / cover no-repeat; opacity: .15; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 46%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 46%, #000 100%); }
.product-flow > .container { position: relative; z-index: 1; }
.flow-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.flow-line::before { content: ""; position: absolute; left: 16.666%; right: 16.666%; top: 118px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 10%, var(--accent) 90%, transparent); box-shadow: 0 0 14px var(--glow-accent); opacity: .2; transform: scaleX(0); transform-origin: left center; }
.flow-line::after { content: ""; position: absolute; z-index: 5; left: 16.666%; top: 113px; width: 11px; height: 11px; border-radius: 50%; opacity: 0; background: #fff; box-shadow: 0 0 7px #fff, 0 0 18px var(--accent), 0 0 34px var(--cyan-500); translate: -50% 0; }
.flow-line.is-visible::before { animation: flow-line-draw 1.15s .2s var(--ease-out) forwards; }
.flow-line.is-visible::after { animation: flow-signal 4.6s .55s ease-in-out 1 both; }
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 22px; text-align: center; }
.flow-step::before { content: ""; position: absolute; z-index: 3; top: 114px; width: 9px; height: 9px; border: 2px solid var(--surface-window); border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--glow-accent); }
.flow-step__visual { position: relative; z-index: 1; display: grid; place-items: center; width: 190px; height: 170px; }
.flow-step__visual::after { content: ""; position: absolute; inset: 35px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(39, 170, 225, .19), transparent 67%); }
.flow-step__visual img { display: block; max-width: 145px; max-height: 118px; object-fit: contain; filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .42)); }
.flow-step:nth-child(1) { --flow-delay: .55s; }
.flow-step:nth-child(2) { --flow-delay: 1.55s; }
.flow-step:nth-child(3) { --flow-delay: 2.55s; }
.flow-line.is-visible .flow-step::before { animation: flow-node 4.6s var(--flow-delay) ease-in-out 1; }
.flow-line.is-visible .flow-step__visual { animation: flow-device 4.6s var(--flow-delay) ease-in-out 1; }
.flow-line.is-visible .flow-step__visual::after { animation: flow-halo 4.6s var(--flow-delay) ease-in-out 1; }
.flow-step--device .flow-step__visual::after {
  inset: 8px 22px;
  background: radial-gradient(ellipse at center, rgba(39, 170, 225, .46) 0%, rgba(0, 114, 188, .2) 43%, transparent 74%);
  filter: blur(7px);
  box-shadow: 0 0 30px rgba(39, 170, 225, .14);
}
.flow-step--device .flow-step__visual img {
  max-height: 160px;
  filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .42)) drop-shadow(0 0 15px rgba(39, 170, 225, .24));
}
.flow-step:last-child .flow-step__visual img { width: 125px; max-width: 125px; }
.flow-step__number { margin: 18px 0 9px; color: var(--accent); font-family: "Poppins", sans-serif; font-size: 13px; letter-spacing: .12em; }
.flow-step strong { color: var(--text-primary); font-size: 18px; font-weight: 500; }
.flow-step small { max-width: 225px; margin-top: 9px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

@keyframes flow-line-draw {
  from { opacity: .2; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes flow-signal {
  0% { left: 16.666%; opacity: 0; }
  4% { left: 16.666%; opacity: 1; }
  46%, 54% { left: 83.333%; opacity: 1; }
  96% { left: 16.666%; opacity: 1; }
  100% { left: 16.666%; opacity: 0; }
}

@keyframes flow-node {
  0%, 19%, 100% { scale: 1; background: var(--accent); box-shadow: 0 0 12px var(--glow-accent); }
  7% { scale: 1.75; background: #fff; box-shadow: 0 0 8px #fff, 0 0 24px var(--accent); }
}

@keyframes flow-device {
  0%, 19%, 100% { transform: translateY(0); filter: brightness(1); }
  7% { transform: translateY(-8px); filter: brightness(1.16); }
}

@keyframes flow-halo {
  0%, 19%, 100% { opacity: .55; scale: .9; }
  7% { opacity: 1; scale: 1.32; }
}

.product-capabilities { background: radial-gradient(circle at 86% 40%, rgba(0, 114, 188, .13), transparent 34%); }
.capabilities-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); align-items: center; gap: clamp(48px, 7vw, 110px); margin-bottom: clamp(46px, 5vw, 72px); }
.capabilities-intro .product-heading { margin-bottom: 0; }
.capabilities-emblem { display: grid; place-items: center; min-height: 230px; }
.capabilities-emblem img { display: block; width: min(62%, 245px); height: auto; opacity: .96; }
.capability-overview { display: grid; grid-template-columns: 1fr .86fr 1fr; border: 1px solid var(--border-strong); border-radius: var(--radius-panel-ui); overflow: hidden; background: rgba(7, 14, 24, .64); box-shadow: 0 30px 70px rgba(0, 0, 0, .22); }
.capability-column { min-width: 0; padding: clamp(26px, 3vw, 42px); border-right: 1px solid var(--border-strong); }
.capability-column:last-child { border-right: 0; }
.capability-column--accent { background: linear-gradient(180deg, rgba(20, 49, 78, .52), rgba(9, 23, 39, .22)); }
.capability-column header { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 36px; }
.capability-column header > span { color: var(--accent); font-family: "Poppins", sans-serif; font-size: 12px; }
.capability-column header small { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.capability-column h3 { margin: 0; color: var(--text-primary); font-size: 22px; line-height: 1.2; }
.capability-block + .capability-block { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(165, 178, 204, .13); }
.capability-column h4 { margin: 0 0 18px; color: var(--accent); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.capability-block ul { margin: 0; padding: 0; list-style: none; }
.capability-block li { display: grid; grid-template-columns: minmax(105px, .44fr) 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(165, 178, 204, .09); }
.capability-block li:first-child { border-top: 0; }
.capability-block strong { color: var(--text-primary); font-size: 13px; font-weight: 500; }
.capability-block span { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.connectivity-grid { display: grid; gap: 14px; }
.connectivity-grid > div { padding: 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-button-ui); background: rgba(18, 50, 80, .34); }
.connectivity-grid small { display: block; margin-bottom: 8px; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.connectivity-grid strong { display: block; color: var(--text-primary); font-family: "Poppins", sans-serif; font-size: 21px; }
.connectivity-grid span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.protocol-groups { display: grid; gap: 28px; }
.protocol-groups > div { padding-bottom: 26px; border-bottom: 1px solid rgba(165, 178, 204, .12); }
.protocol-groups > div:last-child { padding-bottom: 0; border-bottom: 0; }
.protocol-groups p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.85; }

.technical-drawing { background: linear-gradient(120deg, rgba(17, 27, 43, .94), rgba(4, 15, 26, .97)); }
.technical-drawing::before { content: ""; position: absolute; inset: 0; opacity: .35; background: linear-gradient(90deg, rgba(14,20,32,.9), transparent 50%), url("../assets/images/bg2.png") center / cover no-repeat; }
.technical-drawing .product-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0 0 var(--space-xl);
  color: var(--accent);
  font-size: var(--font-caption);
  font-weight: 600;
  letter-spacing: calc(var(--tracking) * 2);
  text-transform: uppercase;
}
.drawing-layout { position: relative; display: grid; grid-template-columns: minmax(440px, .95fr) minmax(360px, 1.05fr); align-items: center; gap: clamp(28px, 3.5vw, 54px); }
.drawing-copy { position: relative; z-index: 1; }
.drawing-copy h2 { white-space: nowrap; }
.drawing-notes { margin: 42px 0 0; }
.drawing-notes > div { display: grid; grid-template-columns: 105px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(165, 178, 204, .13); }
.drawing-notes dt { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.drawing-notes dd { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 2; }
.drawing-board { position: relative; display: grid; justify-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.drawing-board::before { display: none; }
.drawing-board img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 430px);
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  image-rendering: auto;
  filter: brightness(1.55) contrast(1.06);
}
.drawing-board figcaption { position: relative; z-index: 1; margin-top: 10px; color: var(--text-faint); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.technical-data { background: radial-gradient(circle at 15% 20%, rgba(122, 85, 164, .1), transparent 32%); }
.technical-table-wrap { border: 1px solid var(--border-strong); border-radius: var(--radius-panel-ui); overflow: hidden; background: rgba(9, 18, 30, .74); }
.technical-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.technical-table tr { border-top: 1px solid rgba(165, 178, 204, .12); }
.technical-table tr:first-child { border-top: 0; }
.technical-table th,
.technical-table td { padding: 18px 22px; vertical-align: top; text-align: left; }
.technical-table th { width: 17%; color: var(--text-faint); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(18, 50, 80, .23); }
.technical-table td { width: 33%; color: var(--text-control); font-size: 13px; line-height: 1.55; }
.technical-table th:nth-child(3) { border-left: 1px solid rgba(165, 178, 204, .12); }

.package-section { isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(8, 15, 25, .72), rgba(9, 20, 34, .96)); }
.package-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/images/bg5.png") 78% 52% / min(780px, 70vw) auto no-repeat; opacity: .64; -webkit-mask-image: linear-gradient(90deg, transparent 18%, rgba(0,0,0,.3) 38%, #000 66%, rgba(0,0,0,.72) 100%); mask-image: linear-gradient(90deg, transparent 18%, rgba(0,0,0,.3) 38%, #000 66%, rgba(0,0,0,.72) 100%); }
.package-section::after { content: ""; position: absolute; right: -4%; bottom: 4%; z-index: 0; width: 68%; height: 62%; pointer-events: none; background: radial-gradient(ellipse at 58% 52%, rgba(229, 25, 87, .2) 0%, rgba(190, 39, 126, .12) 30%, rgba(122, 85, 164, .07) 48%, transparent 72%); filter: blur(56px); transform: rotate(-12deg); }
.package-section > .container { position: relative; z-index: 1; }
.package-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-panel-ui); overflow: hidden; list-style: none; }
.package-item { position: relative; min-width: 0; min-height: 380px; padding: 22px; border-right: 1px solid var(--border-strong); background: rgba(8, 17, 29, .72); }
.package-item:last-child { border-right: 0; }
.package-item > span { position: absolute; top: 20px; left: 20px; color: var(--accent); font-family: "Poppins", sans-serif; font-size: 11px; }
.package-item h3 { margin: 22px 0 7px; color: var(--text-primary); font-size: 16px; line-height: 1.3; }
.package-item p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.package-visual { position: relative; display: grid; place-items: center; height: 235px; }
.package-visual::after { content: ""; position: absolute; z-index: 0; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(39, 170, 225, .16), transparent 70%); }
.package-visual img { position: relative; z-index: 1; display: block; max-width: 195px; max-height: 210px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0,0,0,.5)); }
.package-visual--case i { position: relative; z-index: 1; width: 132px; height: 91px; border: 4px solid #60728c; border-radius: 9px; background: linear-gradient(135deg, #1d2735, #0b111b); box-shadow: inset 0 0 0 6px #111b28, 0 16px 25px rgba(0,0,0,.35); }
.package-visual--case i::before { content: ""; position: absolute; left: 42px; top: -23px; width: 42px; height: 22px; border: 4px solid #60728c; border-bottom: 0; border-radius: 7px 7px 0 0; }
.package-visual--case i::after { content: ""; position: absolute; left: 21px; right: 21px; top: 43px; height: 2px; background: #60728c; box-shadow: -12px 0 0 -1px var(--accent), 12px 0 0 -1px var(--accent); }
.package-visual--cable i,
.package-visual--usb i { position: relative; z-index: 1; width: 96px; height: 96px; border: 5px solid #60728c; border-right-color: transparent; border-radius: 50%; rotate: -25deg; }
.package-visual--cable b,
.package-visual--usb b { position: absolute; z-index: 2; width: 32px; height: 22px; right: 42px; bottom: 62px; border: 3px solid #7e8da4; border-radius: 4px; background: #121d2b; rotate: -25deg; }
.package-visual--cable b::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -6px; height: 4px; background: var(--accent); }
.package-visual--usb b { width: 28px; height: 15px; }
.package-visual--usb b::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--accent); }
.package-visual--power i { position: relative; z-index: 1; width: 48px; height: 105px; border: 3px solid #687991; border-radius: 9px 9px 20px 20px; background: linear-gradient(90deg, #101824, #29394c, #101824); rotate: -13deg; box-shadow: 0 16px 24px rgba(0,0,0,.35); }
.package-visual--power i::before { content: ""; position: absolute; left: 16px; top: -20px; width: 11px; height: 21px; border-radius: 5px 5px 0 0; background: #8b99aa; }
.package-visual--power i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 30px; height: 3px; background: var(--accent); box-shadow: 0 10px #394b60, 0 20px #394b60; }

.product-cta {
  margin-top: -1px;
  padding: clamp(58px, 6vw, 84px) 0 clamp(100px, 10vw, 150px);
  scroll-margin-top: calc(var(--header-h) + 70px);
  background: linear-gradient(180deg, rgba(9, 20, 34, .96) 0, rgba(9, 20, 34, .62) 105px, rgba(9, 20, 34, 0) 260px);
}
.product-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 54px; padding: clamp(38px, 5vw, 62px); border: 1px solid var(--border-strong); border-radius: var(--radius-panel-ui); background: linear-gradient(110deg, rgba(18,50,80,.9), rgba(8,21,36,.94)), url("../assets/images/bg5.png") center / cover; }
.product-cta h2 { max-width: 760px; font-size: clamp(30px, 3.2vw, 44px); }
.product-cta p:not(.product-kicker) { max-width: 700px; margin: 18px 0 0; color: var(--text-secondary); }
.product-cta__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.product-cta__actions .btn { min-width: 220px; min-height: 52px; justify-content: center; }

/* Shared subpage system: ELP Pass-Thru Link */
.software-page .product-heading { max-width: 760px; }
.software-page .product-heading h2 { font-size: clamp(32px, 3.35vw, 46px); }
.software-page .product-heading > p:last-child { font-size: 16px; }
.software-page #features.container { width: 100%; }

.software-hero__visual {
  align-content: center;
  justify-items: center;
  gap: 24px;
  padding: 82px 0 46px;
}
.software-hero .software-hero__logo {
  position: relative;
  z-index: 2;
  width: min(68%, 330px);
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 25px rgba(0, 0, 0, .35));
}
.software-hero__screen {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel-ui);
  background: rgba(7, 15, 27, .82);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .46), 0 0 45px rgba(39, 170, 225, .1);
}
.software-hero__screen::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  border-radius: inherit;
  background: var(--border-hero);
}
.software-hero__screen img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 6px;
  object-fit: cover;
  filter: none;
}

.software-download { isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(8, 15, 25, .5), rgba(10, 20, 34, .92)); }
.software-download::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/bg5.png") 92% 52% / min(960px, 84vw) auto no-repeat;
  opacity: .48;
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, rgba(0, 0, 0, .2) 32%, #000 62%, rgba(0, 0, 0, .88) 100%);
  mask-image: linear-gradient(90deg, transparent 3%, rgba(0, 0, 0, .2) 32%, #000 62%, rgba(0, 0, 0, .88) 100%);
}
.software-download > .container { position: relative; z-index: 1; }
.software-download__grid {
  align-items: stretch;
  gap: clamp(var(--space-xxl), 4vw, calc(var(--space-xxl) * 1.5));
}

.software-download__grid .tile {
  height: 100%;
  padding: var(--space-xxl);
  background: rgba(13, 29, 49, .78);
}

.software-download__grid .tile > .tile__title { margin-bottom: var(--space-xl); }
.software-download__grid .spec { column-gap: var(--space-xxl); row-gap: var(--space-m); }
.software-download__grid [data-ready] > * + * { margin-top: var(--space-xl); }

.software-download__grid .spec--table {
  grid-template-columns: minmax(calc(var(--space-xxl) * 4), .7fr) minmax(0, 1.3fr);
  row-gap: 0;
}

.software-download__grid .spec--table dt,
.software-download__grid .spec--table dd {
  padding-block: var(--space-m);
  line-height: 1.5;
}

.software-download__grid #requirements .note {
  margin-top: var(--space-xl);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .software-download__grid .tile { padding: var(--space-xl); }
  .software-download__grid .spec--table { grid-template-columns: 1fr; }
  .software-download__grid .spec--table dt {
    padding: var(--space-m) 0 0;
    border-bottom: 0;
  }
  .software-download__grid .spec--table dd { padding: var(--space-xs) 0 var(--space-m); }
}

.software-features {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(9, 20, 34, .94), rgba(8, 15, 25, .88));
}
.software-features::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/bg5.png") right center / cover no-repeat;
  opacity: .12;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 46%, #000 100%);
}
.software-features > .container { position: relative; z-index: 1; }
.software-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(42px, 5vw, 64px); }
.software-feature-grid .capability-card { min-height: 245px; }

.software-installation { background: radial-gradient(circle at 12% 32%, rgba(122, 85, 164, .1), transparent 34%); }
.steps--compact { gap: clamp(24px, 2.5vw, 36px); margin-top: 0; }
.steps--compact > li { padding-top: 20px; }
.steps--compact > li::before {
  margin-bottom: 14px;
  font-size: clamp(30px, 3vw, 38px);
}
.steps--compact .tile__title {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
}
.steps--compact p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
}
.steps--compact .product__more {
  font-size: 11px;
  line-height: 1.45;
}

/* Shared subpage system: OEM software */
.oem-page .product-heading { max-width: 780px; }
.oem-page .product-heading h2 { font-size: clamp(32px, 3.35vw, 46px); }
.oem-page .product-heading > p:last-child { font-size: 16px; }
.oem-hero__visual { align-content: center; justify-items: center; padding: 84px 0 52px; }
.oem-hero__diagram {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) 48px minmax(0, 1.25fr) 48px minmax(0, .9fr);
  align-items: center;
  width: min(100%, 680px);
}
.oem-hero__diagram > i {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(39, 170, 225, .22), var(--accent), rgba(39, 170, 225, .22));
}
.oem-hero__diagram > i::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 5px var(--text-primary), 0 0 14px var(--accent);
  animation: none;
}
.oem-hero__diagram.motion-entered > i::after { animation: oem-signal-pass 1.4s ease-in-out .2s 3 both; }
.oem-hero__diagram.motion-entered > i:nth-of-type(2)::after { animation-delay: .55s; }
.oem-hero__node {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 200px;
  padding: 10px 4px;
}
.oem-hero__node img,
.product-hero__visual .oem-hero__node img {
  display: block;
  width: min(100%, 112px);
  height: 112px;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .42));
}
.oem-hero__node--device img,
.product-hero__visual .oem-hero__node--device img {
  width: 152px;
  height: 180px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .48)) drop-shadow(0 0 20px rgba(39, 170, 225, .28));
  animation: none;
}
.oem-hero__diagram.motion-entered .oem-hero__node--device img { animation: oem-device-emphasis 1.4s ease-in-out .35s 3 both; }
.oem-hero__node--device { position: relative; isolation: isolate; }
.oem-hero__node--device::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 170, 225, .26), rgba(0, 114, 188, .1) 42%, transparent 72%);
  animation: none;
}
.oem-hero__diagram.motion-entered .oem-hero__node--device::before { animation: oem-device-halo 1.4s ease-in-out .35s 3 both; }
.oem-hero__node span { margin-top: 10px; color: var(--text-control); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-align: center; text-transform: uppercase; }

@keyframes oem-signal-pass {
  0% { left: 0; opacity: 0; scale: .7; }
  12% { opacity: 1; }
  48% { left: calc(100% - 7px); opacity: 1; scale: 1.35; }
  88% { left: 0; opacity: 1; scale: 1; }
  100% { left: 0; opacity: 0; scale: .7; }
}

@keyframes oem-device-emphasis {
  0%, 100% { transform: none; }
  45% { transform: translateY(-8px) scale(1.045); }
  70% { transform: translateY(-4px) scale(1.02); }
}

@keyframes oem-device-halo {
  0%, 100% { opacity: .55; scale: .9; }
  45% { opacity: 1; scale: 1.25; }
}

.oem-overview { background: linear-gradient(180deg, rgba(8, 15, 25, .5), rgba(9, 20, 34, .94)); }
.oem-overview__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.oem-overview__grid .capability-card { min-height: 255px; }
.oem-card__number { color: var(--accent); font-family: "Poppins", sans-serif; font-size: 12px; letter-spacing: .12em; }

.product-section.oem-subscription {
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--space-xxl) * 2);
  background: linear-gradient(180deg, rgba(9, 20, 34, .94), rgba(8, 15, 25, .9));
}
.oem-subscription::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/bg5.png") right center / cover no-repeat;
  opacity: .20;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 58%, #000);
}
.oem-subscription > .container { position: relative; z-index: 1; }
.oem-subscription .steps { margin-top: 0; }
.oem-portals { background: radial-gradient(circle at 10% 25%, rgba(122, 85, 164, .1), transparent 32%); }
.oem-portals > .container > .note { max-width: none; text-wrap: wrap; }
.oem-portals .group-title {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
  padding-left: var(--space-m);
  border-left: var(--space-xs) solid var(--accent);
  color: var(--text-primary);
  font-size: var(--font-title);
  line-height: 1.5;
}
.oem-portals .group-title::after {
  content: "";
  flex: 1;
  min-width: var(--space-l);
  border-top: 1px solid var(--divider);
}
.oem-portals .grid + .group-title { margin-top: calc(var(--space-xxl) * 2); }

.reveal { opacity: 1; translate: none; }
.reveal.is-visible { opacity: 1; translate: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .flow-line::before { opacity: 1; transform: none; }
  .flow-line::after { display: none; }
  .flow-line.is-visible .flow-step::before,
  .flow-line.is-visible .flow-step__visual,
  .flow-line.is-visible .flow-step__visual::after { animation: none; }
  .oem-hero__diagram > i::after,
  .oem-hero__node--device img,
  .oem-hero__node--device::before { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1050px) {
  .product-hero__inner { grid-template-columns: 1fr .68fr; }
  .product-hero__visual img { width: min(100%, 350px); }
  .capabilities-intro { grid-template-columns: minmax(0, 1fr) minmax(310px, .7fr); gap: 44px; }
  .capability-overview { grid-template-columns: 1fr 1fr; }
  .capability-column:nth-child(2) { border-right: 0; }
  .capability-column:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border-strong); }
  .protocol-groups { grid-template-columns: repeat(3, 1fr); }
  .protocol-groups > div { padding: 0 24px 0 0; border-right: 1px solid rgba(165,178,204,.12); border-bottom: 0; }
  .protocol-groups > div:last-child { border-right: 0; }
  .drawing-layout { grid-template-columns: 1fr; }
  .drawing-copy { max-width: 790px; }
  .drawing-copy h2 { white-space: normal; }
  .package-grid { grid-template-columns: repeat(3, 1fr); }
  .package-item { border-bottom: 1px solid var(--border-strong); }
  .package-item:nth-child(3) { border-right: 0; }
  .package-item:nth-child(4), .package-item:nth-child(5) { border-bottom: 0; }
  .package-item:nth-child(5) { border-right: 0; }
  .software-hero__visual { padding-left: 18px; }
  .software-hero__screen img { width: 100%; max-height: none; }
  .software-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oem-hero__visual { padding-left: 18px; }
}

@media (max-width: 820px) {
  .product-hero { --product-hero-content-offset: 0px; min-height: auto; }
  .product-hero__inner { grid-template-columns: 1fr; padding-top: 0; }
  .product-hero__copy { position: relative; z-index: 2; }
  .breadcrumbs { margin-bottom: 30px; }
  .product-hero__visual { min-height: 380px; margin-top: -55px; opacity: .75; }
  .product-hero__visual img { max-height: 420px; }
  .product-facts { grid-template-columns: repeat(2, 1fr); }
  .product-facts > div:nth-child(2) { border-right: 0; }
  .product-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-strong); }
  .product-subnav { position: relative; top: auto; overflow-x: auto; }
  .product-subnav .container { justify-content: flex-start; width: max-content; min-width: 100%; padding-inline: var(--gutter); }
  .capabilities-intro { grid-template-columns: 1fr; align-items: start; gap: 42px; }
  .capabilities-emblem { width: min(100%, 520px); min-height: 190px; }
  .flow-line { grid-template-columns: repeat(3, 1fr); gap: 48px 0; }
  .flow-line::before,
  .flow-line::after { display: none; }
  .flow-step::before { top: 106px; }
  .technical-table { table-layout: auto; }
  .technical-table tr { display: grid; grid-template-columns: 145px 1fr; }
  .technical-table th,
  .technical-table td { width: auto; }
  .technical-table th:nth-child(3) { border-left: 0; border-top: 1px solid rgba(165,178,204,.12); }
  .technical-table td:nth-child(4) { border-top: 1px solid rgba(165,178,204,.12); }
  .product-cta__inner { align-items: flex-start; flex-direction: column; }
  .product-cta__actions { align-items: center; }
  .software-hero__visual { min-height: 430px; margin-top: -18px; padding: 30px 0 46px; opacity: 1; }
  .software-hero .software-hero__logo { width: min(54%, 280px); }
  .software-hero__screen { width: min(92%, 600px); }
  .software-hero__screen img { width: 100%; max-height: none; }
  .oem-hero__visual { min-height: 340px; margin-top: 0; padding: 28px 0 44px; opacity: 1; }
  .oem-hero__diagram { width: min(100%, 650px); }
}

@media (max-width: 640px) {
  .product-page .container:not(.site-header__bar) { width: min(var(--container), calc(100% - 32px)); }
  .product-section { padding: 88px 0; }
  .product-hero h1 { font-size: clamp(40px, 11vw, 54px); }
  .oem-hero h1 { font-size: 39px; }
  .product-hero__lead { font-size: 15px; }
  .product-hero__visual { min-height: 330px; }
  .product-facts > div { padding: 18px 16px; }
  .product-facts dd { font-size: 15px; }
  .flow-line { grid-template-columns: 1fr; }
  .flow-step { padding-bottom: 12px; }
  .flow-step::before { display: none; }
  .capabilities-emblem { min-height: 165px; }
  .capabilities-emblem img { width: min(58%, 210px); }
  .capability-overview { grid-template-columns: 1fr; }
  .capability-column { border-right: 0; border-bottom: 1px solid var(--border-strong); }
  .capability-column:nth-child(2) { border-bottom: 1px solid var(--border-strong); }
  .capability-column:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
  .protocol-groups { grid-template-columns: 1fr; }
  .protocol-groups > div { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(165,178,204,.12); }
  .drawing-board { padding: 0; }
  .technical-table tr { grid-template-columns: 1fr; }
  .technical-table th { padding-bottom: 6px; }
  .technical-table td { padding-top: 7px; }
  .technical-table th:nth-child(3) { padding-top: 18px; }
  .technical-table td:nth-child(4) { border-top: 0; }
  .package-grid { grid-template-columns: 1fr; }
  .package-item { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--border-strong) !important; }
  .package-item:last-child { border-bottom: 0 !important; }
  .package-visual { height: 205px; }
  .product-cta__inner { padding: 34px 24px; }
  .product-cta__actions { width: 100%; }
  .product-cta__actions .btn { width: 100%; }
  .software-hero__visual { min-height: 320px; padding-bottom: 34px; }
  .software-feature-grid { grid-template-columns: 1fr; }
  .software-feature-grid .capability-card { min-height: 0; }
  .oem-hero__visual { min-height: 270px; }
  .oem-hero__diagram { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); }
  .oem-hero__node { min-height: 145px; padding: 14px 5px; }
  .oem-hero__node img,
  .product-hero__visual .oem-hero__node img { width: min(100%, 76px); height: 78px; }
  .oem-hero__node--device img,
  .product-hero__visual .oem-hero__node--device img { width: 86px; height: 118px; }
  .oem-hero__node--device::before { width: 112px; height: 112px; }
  .oem-hero__node span { font-size: 8px; }
  .oem-overview__grid { grid-template-columns: 1fr; }
  .oem-overview__grid .capability-card { min-height: 0; }
}


/* PNG technical drawing: one reveal on entry; no change without JavaScript. */
.drawing-board {
  --drawing-max-width: 430px;
  --drawing-duration: 3.6s;
  --drawing-delay: .25s;
  --drawing-easing: cubic-bezier(.3, 0, .35, 1);
  --drawing-scan-thickness: 1px;
  --drawing-scan-opacity: .7;
}
.drawing-scan {
  position: relative;
  width: min(100%, var(--drawing-max-width));
  overflow: hidden;
}
.drawing-board .drawing-scan img { width: 100%; }
.drawing-scan::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 0;
  height: var(--drawing-scan-thickness);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  pointer-events: none;
}
.drawing-scan.is-pending img { clip-path: inset(0 0 100%); }
.drawing-scan.is-drawing img {
  animation: drawing-png-reveal var(--drawing-duration) var(--drawing-delay) var(--drawing-easing) both;
}
.drawing-scan.is-drawing::after {
  animation: drawing-png-scan var(--drawing-duration) var(--drawing-delay) var(--drawing-easing) both;
}
@keyframes drawing-png-reveal {
  from { clip-path: inset(0 0 100%); }
  to { clip-path: inset(0); }
}
@keyframes drawing-png-scan {
  0% { top: 0; opacity: 0; }
  6%, 94% { opacity: var(--drawing-scan-opacity); }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drawing-scan.is-pending img,
  .drawing-scan.is-drawing img { animation: none; clip-path: none; }
  .drawing-scan::after { display: none; }
}

/* Reuse the FAQ question mark in the service contact panel. */
.support-page #service .cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --service-question-size: clamp(192px, 24vw, 320px);
}
.support-page #service .cta-panel::before {
  right: var(--space-xl);
  font-size: var(--service-question-size);
}
@media (min-width: 1050px) {
  .support-page #service .cta-panel { padding-right: calc(var(--space-xxl) * 5); }
}
@media (max-width: 599px) {
  .support-page #service .cta-panel::before { display: none; }
}

/* Product photos enter individually; captions and card geometry stay in place. */
.package-grid {
  --package-photo-max-width: 195px;
  --package-photo-duration: 700ms;
  --package-photo-step: 90ms;
  --package-photo-distance: var(--space-xl);
  --package-photo-blur: 4px;
  --package-photo-start-scale: .94;
  --package-photo-hover-scale: 1.035;
}
.package-visual.photo-pending { opacity: 0; }
.package-visual.photo-entering {
  animation: package-photo-enter var(--package-photo-duration) var(--ease-out) var(--photo-delay, 0ms) both;
}
.package-visual img {
  max-width: min(100%, var(--package-photo-max-width));
  transition: transform var(--motion-ui-duration) var(--ease-out);
}
@keyframes package-photo-enter {
  from {
    opacity: 0;
    transform: translateY(var(--package-photo-distance)) scale(var(--package-photo-start-scale));
    filter: blur(var(--package-photo-blur));
  }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .package-item:hover .package-visual img { transform: scale(var(--package-photo-hover-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .package-visual.photo-pending,
  .package-visual.photo-entering { opacity: 1; animation: none; transform: none; filter: none; }
  .package-visual img { transition: none; }
}


/* Technical signal rails: a crisp core and a short luminous data packet. */
.product-page {
  --signal-rail-height: 1px;
  --signal-packet-height: 2px;
  --signal-core: var(--text-primary);
  --signal-color: var(--cyan-400);
  --signal-glow: var(--glow-accent);
  --signal-terminal-size: 4px;
  --signal-rail-opacity: .75;
  --signal-flow-duration: 3.2s;
  --signal-oem-duration: 1.4s;
  --signal-start-delay: .3s;
  --signal-oem-next-delay: 1.7s;
}
.flow-line { --signal-packet-width: 80px; }
.flow-line::before {
  height: var(--signal-rail-height);
  background: var(--signal-color);
  box-shadow: 0 0 var(--space-xs) var(--signal-color), 0 0 var(--space-m) var(--signal-glow);
  opacity: var(--signal-rail-opacity);
  transform: none;
}
.flow-line.is-visible::before { animation: signal-rail-on var(--motion-entry-duration) var(--ease-out) both; }
.flow-line::after,
.oem-hero__diagram > i::after {
  height: var(--signal-packet-height);
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--signal-color) 45%, var(--signal-core) 82%, var(--signal-color) 94%, transparent);
  background-size: var(--signal-packet-width) 100%;
  background-repeat: no-repeat;
  background-position: calc(0% - var(--signal-packet-width)) 0;
  box-shadow: none;
  filter: drop-shadow(0 0 var(--space-xs) var(--signal-color));
  opacity: 0;
  translate: none;
  pointer-events: none;
}
.flow-line::after { left: 16.666%; right: 16.666%; top: 117px; width: auto; }
.flow-line.is-visible::after { animation: signal-packet-pass var(--signal-flow-duration) var(--signal-start-delay) linear 1 both; }
.flow-step::before {
  top: 116px;
  width: var(--signal-terminal-size);
  height: var(--signal-terminal-size);
  border: 0;
  border-radius: 0;
  background: var(--signal-core);
  box-shadow: 0 0 var(--space-xs) var(--signal-color);
}
.flow-line.is-visible .flow-step::before,
.flow-line.is-visible .flow-step__visual,
.flow-line.is-visible .flow-step__visual::after { animation: none; }
.oem-hero__diagram { --signal-packet-width: 16px; }
.oem-hero__diagram > i {
  height: var(--signal-rail-height);
  background: var(--signal-color);
  box-shadow: 0 0 var(--space-xs) var(--signal-color), 0 0 var(--space-m) var(--signal-glow);
}
.oem-hero__diagram > i::after { top: 0; left: 0; width: 100%; }
.oem-hero__diagram.motion-entered > i::after {
  animation: signal-packet-pass var(--signal-oem-duration) var(--signal-start-delay) linear 1 both;
}
.oem-hero__diagram.motion-entered > i:nth-of-type(2)::after { animation-delay: var(--signal-oem-next-delay); }
.oem-hero__diagram.motion-entered .oem-hero__node--device img,
.oem-hero__diagram.motion-entered .oem-hero__node--device::before { animation: none; }
@keyframes signal-rail-on {
  from { opacity: .2; }
  to { opacity: var(--signal-rail-opacity); }
}
@keyframes signal-packet-pass {
  0% { background-position: calc(0% - var(--signal-packet-width)) 0; opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { background-position: calc(100% + var(--signal-packet-width)) 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-line.is-visible::before { animation: none; }
  .flow-line.is-visible::after,
  .oem-hero__diagram.motion-entered > i::after { display: none; animation: none; }
}

/* OEM diagram: clear device outlines and a quiet bidirectional data schematic. */
.oem-hero__visual > .product-hero__halo,
.oem-hero__node--device::before,
.oem-software-visual::before,
.oem-software-visual::after { display: none; }
.oem-hero__node--software {
  --oem-software-size: 136px;
  --oem-data-duration: 3.6s;
}
.oem-software-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--oem-software-size);
  height: var(--oem-software-size);
}
.oem-hero__node .oem-software-visual img,
.product-hero__visual .oem-hero__node .oem-software-visual img {
  width: 100%;
  height: 100%;
  filter: none;
}
.oem-hero__node--device img,
.product-hero__visual .oem-hero__node--device img { filter: none; }
.oem-hero__node--software > span { color: var(--cyan-400); }
.oem-hero__diagram > .oem-signal {
  --oem-data-duration: 3.6s;
  position: relative;
  display: block;
  height: 32px;
  color: var(--cyan-400);
  background: none;
  box-shadow: none;
}
.oem-hero__diagram > .oem-signal::before,
.oem-hero__diagram > .oem-signal::after { content: none; display: none; animation: none; }
.oem-signal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.oem-signal__lane,
.oem-signal__arrow { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.oem-signal__lane { opacity: .75; }
.oem-signal__arrow { opacity: .8; }
.oem-signal__packet {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 93;
  opacity: 0;
}
.oem-hero__diagram.motion-entered .oem-signal__packet {
  animation: oem-data-transfer var(--oem-data-duration) .2s linear 1 both;
}
.oem-hero__diagram.motion-entered .oem-signal__packet--return { animation-delay: .7s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet { animation-delay: .5s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet--return { animation-delay: 1s; }
@keyframes oem-data-transfer {
  0% { stroke-dashoffset: 0; opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (max-width: 640px) {
  .oem-hero__node--software { --oem-software-size: 88px; }
  .oem-hero__diagram > .oem-signal { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .oem-hero__diagram.motion-entered .oem-signal__packet { display: none; animation: none; }
}

/* One slow contour highlight per item; the surrounding halos stay disabled. */
.oem-hero__diagram {
  --oem-contour-duration: 2.6s;
  --oem-contour-size: 112px;
}
.oem-contour {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--oem-contour-size);
  height: var(--oem-contour-size);
}
.oem-contour--vehicle { --oem-contour-image: url("../assets/images/vehicle_s.png"); --oem-contour-delay: .1s; }
.oem-contour--device {
  --oem-contour-image: url("../assets/images/elp5_pro_vci_schemat.png");
  --oem-contour-delay: .3s;
  width: 152px;
  height: 180px;
}
.oem-contour--software {
  --oem-contour-image: url("../assets/images/oem_s.png");
  --oem-contour-delay: .5s;
  width: var(--oem-software-size);
  height: var(--oem-software-size);
}
.oem-hero__node .oem-contour img,
.product-hero__visual .oem-hero__node .oem-contour img { width: 100%; height: 100%; filter: none; }
.oem-contour::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 47%, var(--cyan-400) 49%, var(--text-primary) 50%, var(--cyan-400) 51%, transparent 53%);
  background-size: 200% 100%;
  -webkit-mask: var(--oem-contour-image) center bottom / contain no-repeat;
  mask: var(--oem-contour-image) center bottom / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
.oem-hero__diagram.motion-entered .oem-contour::after {
  animation: oem-contour-pass var(--oem-contour-duration) var(--oem-contour-delay) linear 1 both;
}
@keyframes oem-contour-pass {
  0% { background-position: 100% 0; opacity: 0; }
  10%, 90% { opacity: .75; }
  100% { background-position: 0% 0; opacity: 0; }
}
@media (max-width: 640px) {
  .oem-hero__diagram { --oem-contour-size: 76px; }
  .oem-contour--device { width: 86px; height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .oem-hero__diagram.motion-entered .oem-contour::after { display: none; animation: none; }
}

/* Balanced connector clearance and an overlay aligned to the actual PNG. */
.oem-hero__diagram {
  --oem-signal-trim: 20px;
  --oem-signal-shift: 6px;
}
.oem-hero__node { grid-template-columns: minmax(0, 1fr); }
.oem-contour { justify-self: center; }
.oem-contour::after { z-index: 2; }
.oem-hero__diagram > .oem-signal {
  justify-self: center;
  width: calc(100% - var(--oem-signal-trim));
}
.oem-hero__diagram > .oem-signal:nth-of-type(1) { translate: var(--oem-signal-shift) 0; }
.oem-hero__diagram > .oem-signal:nth-of-type(2) { translate: calc(-1 * var(--oem-signal-shift)) 0; }
@media (max-width: 640px) {
  .oem-hero__diagram { --oem-signal-trim: 8px; --oem-signal-shift: 1px; }
}

/* Keep the compact two-column hero clear before it stacks on tablets. */
@media (min-width: 821px) and (max-width: 1050px) {
  .oem-hero__diagram {
    grid-template-columns: minmax(0, .9fr) 24px minmax(0, 1.25fr) 24px minmax(0, .9fr);
    --oem-contour-size: 56px;
    --oem-signal-trim: 8px;
    --oem-signal-shift: 1px;
  }
  .oem-contour--device { width: 78px; height: 104px; }
  .oem-contour--software { width: 56px; height: 56px; }
}
/* Address pin aligned with the remaining contact-data icons. */
.company-contact__address { position: relative; padding-left: calc(var(--space-xxl) + var(--space-l)); }
.company-contact__address > .company-contact__icon { top: 0; }
/* Self Test screen with the VCI render in the foreground. */
.support-hero-preview::before { display: none; }
.support-hero-preview__composition {
  position: relative;
  padding-left: 16%;
  padding-bottom: var(--space-xl);
}
.support-hero-preview__composition .support-hero-preview__screen { position: relative; aspect-ratio: 8 / 5; }
.support-hero-preview__composition .support-hero-preview__screen img { position: absolute; width: 128%; max-width: none; height: auto; left: -25%; top: -8%; object-fit: contain; object-position: center; }
.support-hero-preview__device {
  position: absolute;
  z-index: 2;
  left: -3%;
  bottom: 0;
  display: block;
  width: 30%;
  max-width: none;
  height: auto;
  transform: none;
  transform-origin: center bottom;
  filter: drop-shadow(0 var(--space-s) var(--space-l) var(--shadow-tint));
  pointer-events: none;
}
@media (max-width: 480px) {
  .support-hero-preview__composition { padding-bottom: var(--space-l); }
  .support-hero-preview figcaption { font-size: var(--font-body); }
}

/* Keep contact labels and the submit button at their natural height. */
.contact-page .form { align-self: start; align-content: start; }
.contact-page .form__row { align-items: start; }
.contact-page .form .field { align-content: start; gap: var(--space-s); }
.contact-page .form .field__label { margin: 0; }
.contact-page .form .btn-row--end { align-items: center; }
.contact-page .form .btn-row--end .btn[type="submit"] {
  height: 48px;
  min-height: 48px;
  align-self: start;
  border-radius: var(--radius-button-ui);
}

/* Troubleshooting: answers are subordinate to questions, with breathing room. */
.support-page :is(#troubleshooting, #faq) .faq details > div {
  padding-top: var(--space-m);
  font-size: var(--font-body-lg);
  line-height: 1.7;
}
.support-page :is(#troubleshooting, #faq) .faq details > div p { font-size: inherit; line-height: inherit; }
/* Contact invitation and social links belong to the form column. */
.contact-message { display: grid; align-content: start; align-self: start; gap: var(--space-xl); min-width: 0; }
.contact-form-heading h2 { margin: 0; color: var(--text-primary); font-size: clamp(25px, 2.4vw, 31px); font-weight: var(--font-weight-heading); line-height: 1.25; }
.contact-form-heading p { margin: var(--space-s) 0; color: var(--text-secondary); font-size: var(--font-body-lg); line-height: 1.7; max-width: 50ch; }
.contact-social { padding: var(--space-xl); border-top: 1px solid var(--divider); }
.contact-social > p { margin: 0 0 var(--space-s); color: var(--text-secondary); font-size: var(--font-body-lg); }
.contact-social ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s) var(--space-l); margin: 0; padding: 0; list-style: none; }
.contact-social a { display: inline-flex; align-items: center; gap: var(--space-s); min-height: 44px; color: var(--text-primary); font-size: var(--font-body-lg); text-decoration: none; }
.contact-social a .icon { flex: none; width: 20px; height: 20px; color: var(--accent); }
.contact-social a:hover { color: var(--accent); text-decoration: underline; }
.contact-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1100px) { .contact-social ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Contact logo film: original framed composition with sound control only. */
.contact-hero-media {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel-ui);
  background: var(--surface-titlebar);
}
.contact-hero-media__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--surface-titlebar);
  pointer-events: none;
}
.contact-hero-sound {
  position: absolute;
  z-index: 2;
  right: var(--space-m);
  bottom: var(--space-m);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button-ui);
  background: var(--surface-window);
  color: var(--text-primary);
  cursor: pointer;
}
.contact-hero-sound[hidden] { display: none; }
.contact-hero-sound .icon {
  width: 22px;
  height: 22px;
  --icon: url("../assets/icons/sound-off.svg");
}
.contact-hero-sound[aria-pressed="true"] .icon { --icon: url("../assets/icons/sound-on.svg"); }
.contact-hero-sound:hover { color: var(--accent); border-color: var(--accent); }
.contact-hero-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) { .contact-hero-media { max-width: 560px; } }

/* Headquarters sketch beneath the existing logo film. */
.contact-hero-composition { display: grid; align-self: center; justify-self: center; gap: var(--space-xl); width: 100%; min-width: 0; }
.contact-building { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 820px) { .contact-hero-composition { max-width: 560px; } }

/* OEM: exchange of data packets replaces the reflective sweep. */
.oem-hero__diagram .oem-contour::after { display: none; animation: none; }
.oem-hero__diagram { --oem-data-duration: 2s; }
.oem-hero__diagram.motion-entered .oem-signal__packet { animation: oem-data-transfer 2s linear .1s 2 both; stroke-dasharray: 12 88; stroke-width: 2.5; }
.oem-hero__diagram.motion-entered .oem-signal__packet--return { animation-delay: .3s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet { animation-delay: .5s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet--return { animation-delay: .7s; }
.oem-contour::before { content: ""; position: absolute; bottom: calc(var(--space-s) * -1); left: 50%; width: var(--space-xs); height: var(--space-xs); background: var(--cyan-400); border-radius: var(--radius-small); opacity: .4; pointer-events: none; }
.oem-hero__diagram.motion-entered .oem-contour::before { animation: oem-link-ack 2s ease-in-out var(--oem-contour-delay, 0s) 2 both; }
@keyframes oem-link-ack { 0%, 100% { opacity: .4; transform: scale(1); } 35% { opacity: 1; transform: scale(1.5); } 65% { opacity: .6; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
 .oem-hero__diagram.motion-entered .oem-signal__packet { display: none; animation: none; }
 .oem-hero__diagram.motion-entered .oem-contour::before { animation: none; opacity: .6; }
}

/* OEM images gently brighten as a whole, with no status dots or reflective sweep. */
.oem-hero__diagram .oem-contour::before,
.oem-hero__diagram .oem-contour::after { display: none; animation: none; }
.oem-hero__diagram.motion-entered .oem-signal__packet { display: none; animation: none; }
.oem-hero__diagram.motion-entered .oem-contour img { animation: oem-image-shimmer 2.2s ease-in-out var(--oem-contour-delay, 0s) 2 both; }
@keyframes oem-image-shimmer {
 0%, 100% { filter: brightness(1) saturate(1); }
 45% { filter: brightness(1.22) saturate(1.08); }
 65% { filter: brightness(1.12) saturate(1.04); }
}
@media (prefers-reduced-motion: reduce) {
 .oem-hero__diagram.motion-entered .oem-contour img { animation: none; filter: none; }
}

/* Visible brick motif shared by Support and Contact, with quieter secondary placements. */
.support-page .utility-hero .product-hero__pattern,
.contact-page .utility-hero .product-hero__pattern {
 background: url("../assets/images/bg5.png") right center / min(960px, 100vw) auto no-repeat;
 opacity: .58;
 -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 70%);
 mask-image: linear-gradient(90deg, transparent 8%, #000 70%);
}
.support-page #troubleshooting,
.contact-page main > .section { position: relative; isolation: isolate; }
.support-page #troubleshooting::before,
.contact-page main > .section::before {
 content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
 background: url("../assets/images/bg5.png") right center / min(800px, 90vw) auto no-repeat;
 opacity: .22;
 -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 10%, transparent 70%);
 mask-image: radial-gradient(ellipse at 80% 50%, #000 10%, transparent 70%);
}
@media (max-width: 820px) {
 .support-page .utility-hero .product-hero__pattern,
 .contact-page .utility-hero .product-hero__pattern { opacity: .36; background-position: center bottom; background-size: auto 80%; }
}

/* Troubleshooting: keep the brick motif above the page background. */
.support-page #troubleshooting::before {
 z-index: 0;
 background-position: right center;
 background-size: min(960px, 100vw) auto;
 opacity: .55;
 -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%, #000);
 mask-image: linear-gradient(90deg, transparent, #000 55%, #000);
}
.support-page #troubleshooting > * { position: relative; z-index: 1; }

/* A shorter product story with tighter section spacing, scoped to ELP5 PRO-VCI. */
.elp5-page .product-section { padding-block: calc(var(--space-xxl) * 2); }
.elp5-page .product-cta { padding-top: calc(var(--space-xxl) * 1.5); padding-bottom: calc(var(--space-xxl) * 2); }
@media (max-width: 820px) { .elp5-page .product-section { padding-block: calc(var(--space-xxl) * 1.5); } }

/* Social links below the form match the site's circular icon treatment. */
.contact-social a { gap: var(--space-m); }
.contact-social a:hover { color: var(--text-primary); text-decoration: none; }
.contact-social__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-control); transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), transform .25s var(--ease-out); }
.contact-social a:hover .contact-social__icon,
.contact-social a:focus-visible .contact-social__icon { border-color: var(--accent); background: var(--surface-btn-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .contact-social__icon { transition: none; } .contact-social a:hover .contact-social__icon { transform: none; } }

/* OEM live schematic: persistent whole-image shimmer and bidirectional traffic. */
.oem-hero__diagram.motion-entered .oem-contour img { animation: oem-live-image 3.6s ease-in-out var(--oem-contour-delay, 0s) infinite; }
.oem-hero__diagram.motion-entered .oem-signal__packet { display: block; animation: oem-data-transfer 2.4s linear .1s infinite both; stroke-dasharray: 18 82; stroke-width: 2.5; }
.oem-hero__diagram.motion-entered .oem-signal__packet--return { animation-delay: 1.1s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet { animation-delay: .6s; }
.oem-hero__diagram.motion-entered .oem-signal:nth-of-type(2) .oem-signal__packet--return { animation-delay: 1.6s; }
@keyframes oem-live-image { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.38) saturate(1.12); } }
.oem-motion-toggle { justify-self: center; margin-top: var(--space-l); padding: var(--space-s) var(--space-m); border: 1px solid var(--border-strong); border-radius: var(--radius-button-ui); background: var(--surface-titlebar); color: var(--text-secondary); font: inherit; font-size: var(--font-caption); cursor: pointer; }
.oem-motion-toggle:hover { color: var(--accent); border-color: var(--accent); }
.oem-hero__visual.is-motion-paused .oem-contour img,
.oem-hero__visual.is-motion-paused .oem-signal__packet { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
 .oem-hero__diagram.motion-entered .oem-contour img { animation: none; filter: none; }
 .oem-hero__diagram.motion-entered .oem-signal__packet { display: none; animation: none; }
 .oem-motion-toggle { display: none; }
}

/* Vehicle and OEM software receive a clearer whole-image response. */
.oem-hero__diagram.motion-entered .oem-contour--vehicle img,
.oem-hero__diagram.motion-entered .oem-contour--software img { animation: oem-endpoint-response 3.6s ease-in-out infinite; }
.oem-hero__diagram.motion-entered .oem-contour--software img { animation-delay: .8s; }
@keyframes oem-endpoint-response {
 0%,100% { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
 50% { transform: translateY(-3px) scale(1.025); filter: brightness(1.5) saturate(1.18); }
}
@media (prefers-reduced-motion: reduce) {
 .oem-hero__diagram.motion-entered .oem-contour--vehicle img,
 .oem-hero__diagram.motion-entered .oem-contour--software img { animation: none; transform: none; filter: none; }
}

/* Installation and OEM access share the visible brick motif. */
.software-page .software-installation { isolation: isolate; }
.software-page .software-installation::before {
 content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
 background: url("../assets/images/bg5.png") right center / min(960px, 100vw) auto no-repeat;
 opacity: .5;
 -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
 mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.software-page .software-installation > .container { position: relative; z-index: 1; }
.oem-page .oem-subscription::before { opacity: .55; background-size: min(960px, 100vw) auto; }
/* Contact: move the motif away from the film, into the form section. */
.contact-page .utility-hero .product-hero__pattern { display: none; }
.contact-page main > .section::before {
 z-index: 0; opacity: .55;
 background-position: right bottom;
 -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
 mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.contact-page main > .section > * { position: relative; z-index: 1; }

/* Feather the Troubleshooting texture at its upper and lower edges. */
.support-page #troubleshooting::before {
 -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
 -webkit-mask-composite: source-in;
 mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
 mask-composite: intersect;
}

/* One mobile gutter: avoid combining a narrowed container with inner padding. */
@media (max-width: 820px) {
 html[lang="en"] body.product-page main .container:not(.site-header__bar) {
  width: 100%; max-width: none; margin-inline: auto; padding-inline: var(--space-l);
 }
 html[lang="en"] body.product-page main .container .container { padding-inline: 0; }
 html[lang="en"] body.product-page main .product-heading,
 html[lang="en"] body.product-page main .section-head,
 html[lang="en"] body.product-page main .section-heading {
  margin-inline: 0; text-align: left;
 }
 html[lang="en"] body.product-page main .product-subnav .container {
  width: max-content; min-width: 100%; max-width: none;
 }
 html[lang="en"] body.product-page main .product-hero__copy { min-width: 0; }
 html[lang="en"] body.product-page main h1,
 html[lang="en"] body.product-page main h2 { overflow-wrap: break-word; }
}

/* Named subnavigation targets live on the actual kicker (or heading on Support). */
.product-page main [data-section-anchor] { scroll-margin-top: calc(var(--subnav-anchor-height, 61px) + 12px); }
@media (max-width: 820px) { .product-page main [data-section-anchor] { scroll-margin-top: calc(var(--subnav-anchor-height, 0px) + 12px); } }

/* Give mobile hero kickers breathing room below the sticky header. */
@media (max-width: 820px) {
 html[lang="en"] body.product-page:not(.legal-page) main .product-hero__copy { padding-top: var(--space-xl); }
}

/* Mobile software hero: full-width screenshot close to the introductory copy. */
@media (max-width: 820px) {
 .software-page .software-hero .product-hero__inner { row-gap: var(--space-xl); }
 .software-page .software-hero__visual { min-height: 0; margin-top: 0; padding: 0 0 var(--space-xl); gap: 0; align-content: start; width: 100%; }
 .software-page .software-hero__screen { width: 100%; padding: 0; }
 .software-page .software-hero__screen img { width: 100%; max-height: none; border-radius: 11px 11px 11px 0; }
}

/* Compact mobile Contact hero: no forced empty grid height around the film. */
@media (max-width: 820px) {
 .contact-page .utility-hero { min-height: 0; }
 .contact-page .utility-hero .product-hero__inner { min-height: 0; row-gap: var(--space-xl); align-content: start; padding-bottom: var(--space-xl); }
 .contact-page .utility-hero .product-hero__copy { padding-bottom: 0; }
 .contact-page .utility-hero .product-hero__lead { margin-bottom: 0; }
 .contact-page .contact-hero-media { align-self: start; margin-top: 0; }
}

/* Mobile Contact: centered submit and a compact row of accessible social icons. */
@media (max-width: 820px) {
 .contact-page .form .btn-row--end { justify-content: center; }
 .contact-page .contact-social { padding-inline: 0; }
 .contact-page .contact-social ul { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--space-l); }
 .contact-page .contact-social a { gap: 0; }
 .contact-page .contact-social a > span:not(.contact-social__icon) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* The Key features emblem is redundant on phones; keep the navigation logo. */
@media (max-width: 640px) {
 .elp5-page .product-capabilities .capabilities-emblem { display: none; }
 .elp5-page .capabilities-intro { gap: 0; }
}

/* Mobile OEM hero: explanation, diagram, then actions, without a tall visual spacer. */
@media (max-width: 820px) {
 .oem-page .oem-hero .product-hero__inner { row-gap: var(--space-xl); min-height: 0; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
 .oem-page .oem-hero .product-hero__copy { display: contents; }
 .oem-page .oem-hero .product-hero__copy > .product-kicker { grid-row: 1; margin: 0; }
 .oem-page .oem-hero .product-hero__copy > h1 { grid-row: 2; }
 .oem-page .oem-hero .product-hero__lead { grid-row: 3; margin: 0; }
 .oem-page .oem-hero .oem-hero__visual { grid-row: 4; min-height: 0; margin: 0; padding: var(--space-s) 0; }
 .oem-page .oem-hero .product-hero__actions { grid-row: 5; margin: 0; gap: var(--space-xl); }
}