/* One home-page hero: the existing artwork becomes an interactive device selector.
   Each device slice uses the source image's exact coordinates; no relative rescaling. */
.hero--lineup .hero-art { isolation: isolate; overflow: hidden; }
.hero-motion-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform 650ms cubic-bezier(.22,1,.36,1);
}
.hero-home-view, .hero-product-view {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.hero-home-view { background: #e3d8ca; }
/* Some desktop ratios leave a few pixels of hero visible above the carousel.
   Use the slide's cream on both surrounding surfaces while a product is open. */
.hero.hero--lineup.is-showing-product,
.landing-screen:has(> .hero.hero--lineup.is-showing-product) {
  background: #FAF7F0;
}
.hero--lineup .hero-home-view .hero-lineup,
.hero--lineup .hero-home-view .hero-lineup-image { width: 100%; height: 100%; }
.hero--lineup .hero-home-view .hero-lineup-image { object-fit: contain; }
.hero--lineup .hero-home-view .hero-overlay-wordmark {
  transition: transform 700ms cubic-bezier(.22,1,.36,1),opacity 500ms ease;
  z-index: 3;
}
.hero--lineup.is-selecting .hero-overlay-wordmark {
  /* Leave vertically: the incoming selector heading/labels still enter from the right. */
  transform: translateX(-50%) translateY(-110vh);
  opacity: 0;
}
.hero--lineup .hero-lineup-image { transition: opacity 160ms ease; }
/* Once the four transparent device layers are interactive, use them in BOTH
   home and selector views. Otherwise a static duplicate stays behind on lift. */
.hero--lineup.has-interactive-devices .hero-lineup-image,
.hero--lineup.is-selecting .hero-lineup-image { opacity: 0; }
/* Each product image and its name share one stage-sized coordinate system.
   Scaling this entire pair (rather than transforming each child separately)
   makes the label follow the image exactly around the device's bottom anchor.
   Pointer events remain limited to the actual device button. */
.hero-device-selector {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: inline-size;
}
.hero-device-pair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: var(--device-anchor-x) 100%;
  transition: transform 250ms cubic-bezier(.22,1,.36,1);
}
.hero-device-pair--pf2500 { --device-anchor-x: 17.90579%; }
.hero-device-pair--pf300r { --device-anchor-x: 44.46403%; }
.hero-device-pair--beam-break { --device-anchor-x: 66.17530%; }
.hero-device-pair--frame-shift { --device-anchor-x: 87.44592%; }
.hero-device-pair:has(> .hero-device:is(:hover, :focus-visible, .is-discovery-cue)) {
  transform: scale(1.035);
}
.hero-selector-heading {
  position: absolute;
  /* Wordmark-scale lowercase lettering, anchored inside the same hero artwork. */
  left: 21%;
  top: 8.5%;
  height: 18.2%;
  width: auto;
  max-width: none;
  opacity: 0;
  transform: translateX(100vw);
  transition: transform 700ms cubic-bezier(.22,1,.36,1),opacity 250ms ease;
  pointer-events: none;
}
.hero--lineup.is-selecting .hero-selector-heading { opacity: 1; transform: translateX(0); }
.hero-device {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
/* Buttons are usable even over the normal Overcloq wordmark. The SVG model
   labels and automatic discovery sequence still require selection mode. */
.hero--lineup.has-interactive-devices .hero-device,
.hero--lineup.is-selecting .hero-device { opacity: 1; pointer-events: auto; }
.hero-device-render {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The shared pair above controls both model and label movement. */
  transition: filter 250ms ease;
}
.hero-device-pair:has(> .hero-device:is(:hover, :focus-visible, .is-discovery-cue)) .hero-device-render {
  filter: drop-shadow(0 14px 12px rgba(45,36,25,.19));
}
.hero-device:focus-visible { outline: 2px solid #877565; outline-offset: 2px; }
.hero-device-name {
  position: absolute;
  /* This stage has exactly the same aspect ratio and bounds as the artwork.
     Unlike vw/px sizing, these labels shrink WITH the image on short screens. */
  height: 6.2%;
  width: auto;
  left: var(--label-x);
  top: var(--label-y);
  max-height: none;
  opacity: 0;
  transform: translateX(-50%) translateX(105vw);
  transition: transform 760ms cubic-bezier(.22,1,.36,1),opacity 250ms ease;
  pointer-events: none;
}
.hero--lineup.is-selecting .hero-device-name {
  opacity: 1;
  transform: translateX(-50%);
}
/* All four labels share the original image's coordinate system, not the
   individual device crop. Their font size, spacing and alignment remain
   proportional whenever the hero is resized by width OR viewport height. */
.hero-device-name--pf2500 { --label-x: 27.2%; --label-y: 44%; }
.hero-device-name--pf300r { --label-x: 44.5%; --label-y: 44%; }
.hero-device-name--beam-break { --label-x: 66.2%; --label-y: 56%; }
.hero-device-name--frame-shift { --label-x: 87%; --label-y: 64%; }

/* Product views slide horizontally IN PLACE. The sticky bottom navigation stays put. */
.hero-product-view {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(18px, 3vw, 50px);
  align-items: center;
  padding: clamp(20px,3vw,48px) clamp(26px,6.2vw,96px) clamp(50px,7vw,88px);
  overflow: auto;
  background: #FAF7F0;
  color: #181918;
  box-sizing: border-box;
  /* The hero artwork itself ignores clicks; product links must not inherit that. */
  pointer-events: auto;
}
.hero-product-view *, .hero-product-view *::before, .hero-product-view *::after {box-sizing:border-box;}
.hero-product-view .product-showcase__copy { min-width: 0; max-width: 530px; }
.hero-product-view .product-showcase__eyebrow { margin: 0 0 14px; color: #877565; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(10px,.82vw,13px); font-weight: 600; }
.hero-product-view .product-showcase__heading { margin: 0; color: #181918; font: 400 clamp(38px,5.1vw,82px)/1.04 var(--font-brand,Arial,sans-serif); letter-spacing: -.05em; }
.hero-product-view .product-showcase__description { max-width: 440px; margin: 14px 0 20px; font-size: clamp(14px,1.2vw,18px); line-height: 1.48; color: #57554f; }
.hero-product-view .product-showcase__features { list-style: none; max-width: 430px; margin: 0; padding: 0; border-top: 1px solid #dfd6cb; }
.hero-product-view .product-showcase__features li { padding: clamp(5px,.7vw,10px) 0; color: #464540; border-bottom: 1px solid #dfd6cb; font-size: clamp(12px,1vw,15px); }
.hero-product-view .product-showcase__pricing { margin-top: clamp(14px,2vw,26px); }
.hero-product-view .product-showcase__price-label { display: block; margin-bottom: 5px; color: #877565; font-size: 11px; text-transform: uppercase; letter-spacing:.12em; }
.hero-product-view .product-showcase__price-choice { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.hero-product-view .product-showcase__price-choice strong { font-size: clamp(21px,2vw,32px); letter-spacing:-.04em; }
.hero-product-view .product-showcase__price-choice span,
.hero-product-view .product-showcase__price-or { color: #70685e; font-size: clamp(12px,1vw,15px); }
.hero-product-view .product-showcase__price-or { display: block; margin: 2px 0; }
/* Dedicated product pages: normal links, not more slides in the home carousel. */
.hero-product-view .product-showcase__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-top: clamp(14px, 1.8vw, 24px);
  padding: 10px 16px;
  border: 1px solid #b9ab9a;
  border-radius: 2px;
  color: #181918;
  background: transparent;
  font: 400 clamp(12px, 1.05vw, 15px)/1.35 var(--font-brand, Arial, sans-serif);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.hero-product-view .product-showcase__learn-more:hover { background: #e8ded1; border-color: #877565; }
.hero-product-view .product-showcase__learn-more:focus-visible { outline: 2px solid #877565; outline-offset: 3px; }
.hero-product-view .product-showcase__learn-more span { color: #877565; font-size: 1.2em; }
.hero-product-view .product-showcase__visual { display: flex; justify-content: center; align-items: center; min-width: 0; height: 100%; overflow: hidden; }
.hero-product-view .product-showcase__device-image { display:block; width:100%; height:100%; object-fit:contain; }
.hero-product-view .product-showcase__media-card { display:flex;justify-content:center;align-items:center; width:min(100%,760px);height:100%; max-height:690px; overflow:hidden; background:#efe8dc; border-radius:clamp(12px,2vw,28px); padding:clamp(12px,2.5vw,30px); box-sizing:border-box; }
.hero-product-view .product-showcase__media-card--photo { padding:0; }
.hero-product-view .product-showcase__media-card--photo img { object-fit:cover; }
/* The hero artwork disables pointer events to let the device hotspots choose
   their own hit areas. The carousel controls must opt back in to receive clicks. */
.hero-slide-controls { position:absolute; z-index:8; bottom:clamp(10px,1.5vw,22px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; pointer-events:auto; }
.hero-slide-controls[hidden] { display:none; }
.hero-slide-count { color:#877565;font-size:12px;letter-spacing:.08em;white-space:nowrap; }
.hero-slide-arrow { display:grid;place-items:center; width:40px;height:40px; border:1px solid #d3c9ba; border-radius:50%; color:#514c44; background:#faf7f0; cursor:pointer; }
.hero-slide-arrow:hover { background:#e8ded1; }
.hero-slide-arrow:focus-visible {outline:2px solid #877565;outline-offset:2px;}
.hero-slide-arrow svg {width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}

@media (max-width: 690px) {
  .hero-selector-heading { top: 8.5%; height: 18.2%; }
  .hero--lineup.is-showing-product .hero-art { height: min(640px,calc(100svh - var(--overcloq-nav-height))); aspect-ratio:auto; }
  .hero-product-view { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap: 12px; padding: 18px 22px 62px; }
  .hero-product-view .product-showcase__copy { align-self:center; }
  .hero-product-view .product-showcase__heading {font-size:clamp(35px,8vw,50px);}
  .hero-product-view .product-showcase__eyebrow {margin-bottom:5px;}
  .hero-product-view .product-showcase__description {font-size:13px;margin:8px 0 12px;line-height:1.35;}
  .hero-product-view .product-showcase__features { display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
  .hero-product-view .product-showcase__features li {font-size:11px; padding:5px 0;}
  .hero-product-view .product-showcase__pricing {margin-top:7px;}
  .hero-product-view .product-showcase__price-choice strong {font-size:22px;}
  .hero-product-view .product-showcase__media-card {max-height:100%;}
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-track, .hero--lineup .hero-home-view .hero-overlay-wordmark,
  .hero-lineup-image, .hero-selector-heading, .hero-device,
  .hero-device-pair, .hero-device-render, .hero-device-name {transition:none!important;animation:none!important;}
}