/* =========================================================================
   Two-dimensional page system
   -------------------------------------------------------------------------
   Vertical    Native CSS snapping aligns the landing and each .page.
               Each fills the screen exactly, so at rest only one is in view.
   Horizontal  A page may hold a .page-track: a native horizontal scroller of
               full-width .slide panels with its own snapping. Trackpads,
               touch, links to a slide (href="#slide-id") and the arrow keys
               all move it. two-d.js adds the link/keyboard handling.
               Under the track, the page's .page-tabs bar has a button per
               slide and stays put while the slides move; two-d.js fills in
               the one in view.

   Pages have a FIXED height. Inside a slide, media is the flexible part:
   it shrinks to whatever space the text leaves, so nothing has to overflow.
   ========================================================================= */
:root {
  /* Pages tuck this far under the sticky nav, so sub-pixel rounding can never
     leave a hairline of the previous page showing above the bar. */
  --tuck: 2px;
  /* On mobile, freeze the usable viewport height while the browser's URL
     bar is visible; it must not change during a scroll gesture. */
  --oc-snap-viewport-h: min(100svh, var(--oc-initial-visual-h, 100svh));
  --page-h: calc(var(--oc-snap-viewport-h) - var(--overcloq-nav-height) + var(--tuck));
  --slide-pad-y: clamp(14px, 3.6svh, 44px);
  --slide-pad-x: clamp(20px, 6vw, 110px);
  --accent: #877565;
  --rule: #dfd6cb;
  --body-text: #57554f;
}

html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: calc(var(--overcloq-nav-height) - var(--tuck));
}
.landing-screen,
.page {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--page-h);
  overflow: hidden;
  overflow: clip; /* clip without becoming a scroll container */
  background: var(--page-bg, #FAF7F0);
  color: var(--ink);
  border-top: 1px solid #ded5c8;
}


.page-track {
  position: relative; /* offsetParent for its slides (two-d.js) */
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.page-track::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  /* No bottom padding: the tab bar under the track gives that space. */
  padding: var(--slide-pad-y) var(--slide-pad-x) 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Safety net only: if a very small screen can't fit the text, it scrolls
     inside the slide instead of being cut off. */
  overflow-y: auto;
}
.slide + .slide { border-left: 1px solid #e6ddd1; }

/* ---------- Shared slide pieces ---------- */
.product-showcase__eyebrow {
  margin: 0 0 clamp(6px, 1.4svh, 14px);
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(10px, .82vw, 13px);
  font-weight: 600;
}
.page-heading {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(34px, min(5.1vw, 8.2svh), 82px)/1.04 var(--font-brand);
  letter-spacing: -.05em;
}

/* The page's tab bar: one button per slide, the one in view filled in. */
.page-tabs {
  --tabs-gap: clamp(10px, 2.4svh, 26px);
  /* Keep the separate buttons, using the warmer, darker tab shade. */
  --tabs-surface: color-mix(in srgb, var(--page-bg, #FAF7F0) 87%, #8e7765);
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: var(--tabs-gap) var(--slide-pad-x) clamp(6px, 1svh, 10px);
}
.slide-link {
  display: inline-flex;
  align-items: center;
  background: var(--tabs-surface);
  gap: 10px;
  padding: clamp(6px, 1svh, 9px) 13px;
  border: 1px solid #b9ab9a;
  border-radius: 2px;
  color: var(--ink);
  font: 400 clamp(13px, 1vw, 15px)/1.3 var(--font-brand);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.slide-link span {
  color: var(--accent);
  transition: transform 180ms ease;
}
.slide-link:hover {
  background: color-mix(in srgb, var(--tabs-surface) 86%, var(--ink));
  border-color: var(--accent);
}
.slide-link[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page-bg, #FAF7F0);
}
/* Small phones: tighter buttons, so they still pair up two per row. */
@media (max-width: 420px) {
  .page-tabs { gap: 6px; }
  .slide-link { gap: 6px; padding-inline: 9px; font-size: 12.5px; }
}
.slide-link:hover span { transform: translateX(3px); }
.slide-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Product specs (features and pricing) ---------- */
.slide-text + .product-showcase__features { margin-top: clamp(10px, 2.4svh, 20px); }
.product-showcase__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 24px);
  max-width: 480px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.product-showcase__features li {
  padding: clamp(5px, 1.1svh, 10px) 0;
  border-bottom: 1px solid var(--rule);
  color: #464540;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.3;
}
.product-showcase__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin-top: clamp(10px, 2.4svh, 24px);
}
.product-showcase__price-choice { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.product-showcase__price-choice strong { font-size: clamp(21px, min(2vw, 3.6svh), 32px); letter-spacing: -.04em; }
.product-showcase__price-choice span,
.product-showcase__price-or { color: #70685e; font-size: clamp(12px, 1vw, 15px); }

/* ---------- Detail (sub-page) slides ---------- */
.slide--detail {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "copy media";
  column-gap: clamp(18px, 3vw, 50px);
  row-gap: clamp(8px, 2svh, 20px);
}
.slide-copy { grid-area: copy; align-self: center; min-width: 0; max-width: 480px; }
.slide-title {
  margin: 0;
  font: 400 clamp(30px, min(4vw, 7svh), 62px)/1.05 var(--font-brand);
  letter-spacing: -.045em;
}
.slide-text {
  max-width: 440px;
  margin: clamp(8px, 1.6svh, 14px) 0 0;
  color: var(--body-text);
  font-size: clamp(14px, min(1.2vw, 2.1svh), 18px);
  line-height: 1.5;
}
.slide-note {
  display: inline-block;
  margin-top: clamp(10px, 2svh, 18px);
  padding: 3px 8px;
  border: 1px dashed #c9bba8;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The media cell is a size container: each image/video is sized from its
   own aspect ratio (--ar) to fit the cell exactly, so borders and video
   controls hug the picture instead of a letterboxed box. */
.slide-media {
  grid-area: media;
  container-type: size;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.slide-media > img,
.slide-media > video {
  display: block;
  /* --max-w caps low-resolution media so it isn't blown up too far. */
  width: min(100cqw, 100cqh * var(--ar), var(--max-w, 100cqw));
  height: auto;
  aspect-ratio: var(--ar);
  border-radius: 3px;
  background: #1d1e1c;
}
/* Product renders with transparent backgrounds sit straight on the page. */
.slide-media > img.is-render { background: none; border-radius: 0; }
.media-placeholder {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px dashed #c9bba8;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(135 117 101 / 5%) 14px 15px);
  color: var(--accent);
  text-align: center;
}
.media-placeholder strong { font: 400 clamp(16px, 1.4vw, 20px)/1.3 var(--font-brand); color: #5f554a; }
.media-placeholder span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Hero overview slides ----------
   One large product image, the title tucked into the image's empty top-left
   corner, and the sub-page links centered underneath. The stage is a size
   container: the image is fitted to it by its aspect ratio (--ar), and the
   title is placed and sized from the image's own box, so it stays in that
   corner at every screen size.

   The art is either one <img> (PF2500) or a composite <div> whose pieces are
   placed by fractions of its box (--x/--y/--w), so a product whose render
   has no empty corner can be given one beside it. Per-slide knobs, set on
   .hero-stage, all fractions of the art width:
     --title-x, --title-y (of the height), --title-size, --tagline-size.
   Where the title moves out of the art (phones, landscape phones), the
   composite shrinks to --ar-compact and its pieces move to --cx/--cy/--cw. */
.slide--hero {
  display: flex;
  flex-direction: column;
}
.hero-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
}
/* The fitted image box, declared on the children so their cq units measure
   the stage (and so the phone layout below can override --art-w). */
.hero-stage > * {
  --fit-ar: var(--ar);
  --art-w: min(100cqw, 100cqh * var(--fit-ar));
  --art-h: calc(var(--art-w) / (var(--fit-ar)));
  --art-x: calc((100cqw - var(--art-w)) / 2);
  --art-y: calc((100cqh - var(--art-h)) / 2);
}
.hero-stage__art {
  position: absolute;
  left: var(--art-x);
  top: var(--art-y);
  width: var(--art-w);
  height: auto;
  aspect-ratio: var(--fit-ar);
}
div.hero-stage__art { overflow: hidden; }
div.hero-stage__art > * {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: auto;
}
div.hero-stage__art > video {
  aspect-ratio: var(--ar);
  border-radius: 3px;
  background: #1d1e1c;
}
.hero-stage__title {
  position: absolute;
  z-index: 1;
  left: calc(var(--art-x) + var(--art-w) * var(--title-x, 0.031));
  top: calc(var(--art-y) + var(--art-h) * var(--title-y, 0.036));
  width: max-content;
}
.hero-stage__heading {
  margin: 0;
  color: var(--ink);
  font: 400 calc(var(--art-w) * var(--title-size, 0.1))/1 var(--font-brand);
  letter-spacing: -.05em;
}
.hero-stage__tagline {
  margin: .3em 0 0;
  color: var(--ink);
  font: 400 calc(var(--art-w) * var(--tagline-size, 0.04))/1.16 var(--font-brand);
  letter-spacing: -.02em;
}
/* When the image gets small, an overlaid title would be too small to read.
   On narrow screens (phones) the title moves above the image: title and
   image are centered together as one group, the image fitting the space
   below a reserved title band. */
@container (max-width: 560px), (min-width: 561px) and (max-height: 380px) {
  .hero-stage > * { --fit-ar: var(--ar-compact, var(--ar)); }
  div.hero-stage__art > * {
    left: calc(var(--cx, var(--x)) * 100%);
    top: calc(var(--cy, var(--y)) * 100%);
    width: calc(var(--cw, var(--w)) * 100%);
  }
}
@container (max-width: 560px) {
  .hero-stage > * {
    --title-h: calc(clamp(34px, 10cqw, 52px) * 1.04 + clamp(16px, 4.6cqw, 22px) * 2.6 + 18px);
    --art-w: min(100cqw, (100cqh - var(--title-h)) * var(--fit-ar));
    --group-y: calc((100cqh - var(--title-h) - var(--art-h)) / 2);
    --art-y: calc(var(--group-y) + var(--title-h));
  }
  .hero-stage__title { top: var(--group-y); width: auto; right: 0; }
  .hero-stage__heading { font-size: clamp(34px, 10cqw, 52px); line-height: 1.04; }
  .hero-stage__tagline { margin-top: 6px; font-size: clamp(16px, 4.6cqw, 22px); }
}
/* On wide but short stages (landscape phones) the image is small and there
   is room beside it, so the title sits just left of the image instead. */
@container (min-width: 561px) and (max-height: 380px) {
  .hero-stage__title {
    left: auto;
    right: calc(100cqw - var(--art-x) + 24px);
    width: auto;
    text-align: right;
  }
  .hero-stage__heading { font-size: clamp(28px, 13cqh, 44px); }
  .hero-stage__tagline { font-size: clamp(14px, 5.5cqh, 18px); }
}

/* ---------- Specs image cards ----------
   Keep room INSIDE the slide for the shadow, so the clipped page-track
   doesn't shave off its lower edge. The panels stay above the tabs. */
.slide--spec-card,
.slide--specs {
  padding-bottom: 20px;
}
.slide--spec-card .slide-media,
.slide--specs .spec-stage {
  --spec-card-bg: color-mix(in srgb, var(--page-bg, #FAF7F0) 91%, #8e7765);
  background: var(--spec-card-bg);
  border: 1px solid rgb(92 72 52 / 11%);
  border-radius: 7px;
  box-shadow: 0 5px 14px rgb(65 49 35 / 9%), 0 1px 3px rgb(65 49 35 / 4%);
}
.slide--spec-card .slide-media {
  width: 100%;
  max-width: 560px;
  justify-self: center;
  align-items: flex-end; /* Renders meet the bottom edge, like PF2500. */
  padding: clamp(10px, 1.5vw, 20px) clamp(10px, 1.5vw, 20px) 0;
  overflow: hidden;
}

/* ---------- Annotated specs slides ----------
   A render with callout boxes and thin leader lines to the parts they name.
   Everything is laid out in the render's own pixels (a composite space set
   on .spec-stage: --x0/--y0 its top-left, --cw x --ch the crop that must fit,
   --ch-max how far down the art goes) and scaled by one factor, --s, so the
   boxes, lines and image always line up. The art is cut off at the bottom of
   the slide, so it seems to stand on the tab bar; a taller stage shows more
   of it. Each callout is pinned at the point
   where its line starts (--x/--y), on the box's edge at (--ax, --ay).
   Phones and portrait screens, where the art can't fill the height, get a
   numbered list instead, with matching numbers on the art. */
.slide--specs {
  display: flex;
  flex-direction: column;
  row-gap: clamp(8px, 2svh, 20px);
}
.spec-stage {
  --bx0: var(--x0);
  --bcw: var(--cw);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.spec-figure { display: contents; }
.spec-stage :is(.spec-piece, .spec-head, .spec-callout) {
  --s: min(100cqw / var(--bcw), 100cqh / var(--ch));
  --art-w: calc(var(--bcw) * var(--s));
  --art-h: min(100cqh, var(--ch-max) * var(--s));
  --art-x: calc((100cqw - var(--art-w)) / 2);
  --art-y: calc(100cqh - var(--art-h));
  position: absolute;
  left: calc(var(--art-x) + (var(--x) - var(--bx0)) * var(--s));
  top: calc(var(--art-y) + (var(--y) - var(--y0)) * var(--s));
}
.spec-piece { display: block; width: calc(var(--w) * var(--s)); height: auto; }
/* The title stays at the top of the stage even when the art sits lower. */
.spec-stage .spec-head { top: calc((var(--y) - var(--y0)) * var(--s)); z-index: 1; }
.spec-head .slide-title { font-size: calc(var(--s) * 160); }
.spec-callouts { margin: 0; padding: 0; list-style: none; }
.spec-callout {
  z-index: 1;
  padding: .22em .42em;
  border: 1px solid var(--ink);
  background: var(--card-surface, var(--page-bg, #FAF7F0));
  color: var(--ink);
  font: 400 calc(var(--s) * 70)/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform: translate(calc(var(--ax) * -100%), calc(var(--ay) * -100%));
}
.spec-lines { overflow: visible; pointer-events: none; }
.spec-lines line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spec-marker { display: none; }

/* Phones and portrait screens: title, numbered list, then the art (cropped
   to the device). Same portrait query as the landing composition. */
@media (max-width: 560px), (orientation: portrait) {
  .spec-stage {
    --bx0: var(--x0-m);
    --bcw: var(--cw-m);
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    container-type: normal;
    overflow: hidden;
  }
  .spec-stage .spec-head,
  .spec-stage .spec-callout { position: static; }
  .spec-head .slide-title { font-size: clamp(28px, 8vw, 40px); }
  .spec-callouts { display: grid; row-gap: 8px; counter-reset: spec; padding: 0 10px; }
  .spec-stage .spec-callout {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid #a59a8d;
    background: color-mix(in srgb, var(--card-surface) 75%, white);
    font-size: clamp(15px, 2.2vw, 18px);
    white-space: normal;
    transform: none;
    counter-increment: spec;
  }
  .spec-callout br { display: none; }
  .spec-callout::before,
  .spec-marker {
    flex: none;
    display: grid;
    place-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--page-bg, #FAF7F0);
    font: 600 11px/1 Arial, Helvetica, sans-serif;
  }
  .spec-callout::before { content: counter(spec); transform: translateY(-2px); }
  .spec-figure {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    container-type: size;
  }
  .spec-lines { display: none; }
  .spec-marker { transform: translate(-50%, -50%); }
}

/* PF300R multi-device: centered media composition with light supporting copy.
   The title sits at the upper left, while the panorama and close-up remain the
   visual focus in the center of the slide. */
.slide--race-videos.slide--pf300r-multi {
  display: block;
  padding: clamp(10px, 2svh, 18px) clamp(12px, 2.5vw, 40px) 0;
  overflow: hidden;
}
.pf300r-multi {
  --multi-figure-width: 1020px;
  --multi-head-height: 120px;
  --multi-gap: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--multi-gap);
  min-width: 0;
  min-height: 0;
}
.pf300r-multi__title {
  align-self: flex-start;
  margin: 0 clamp(0px, 4vw, 24px) 0 clamp(20px, 6vw, 84px);
  color: var(--ink);
  font: 400 clamp(32px, min(4.7vw, 7.2svh), 64px)/1.04 var(--font-brand);
  letter-spacing: -.05em;
}
.pf300r-multi__diagram,
.pf300r-multi__lower {
  width: var(--multi-figure-width);
  max-width: 100%;
}
.pf300r-multi__diagram {
  flex: none;
  position: relative;
  margin: 0;
}
.pf300r-camera-rig {
  position: relative;
  width: 100%;
  height: var(--multi-head-height);
}
.pf300r-camera-head {
  position: absolute;
  top: 0;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
}
.pf300r-camera-head--one { left: 27.7777778%; }
.pf300r-camera-head--two { left: 61.1111111%; }
.pf300r-camera-head--three { left: 94.4444444%; }
.pf300r-connectors {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pf300r-connectors line {
  stroke: rgba(82, 76, 69, .55);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.pf300r-multi__diagram > video,
.pf300r-multi__closeup > video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  background: #1d1e1c;
}
.pf300r-multi__diagram > video {
  aspect-ratio: 1080 / 200;
  box-shadow: 0 0 0 1px rgba(42, 39, 35, .13);
}
.pf300r-multi__lower {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(240px, .42fr);
  gap: clamp(26px, 3.2vw, 62px);
  align-items: center;
}
.pf300r-multi__closeup {
  margin: 0;
  min-width: 0;
}
.pf300r-multi__closeup > video {
  aspect-ratio: 16 / 9;
}
.pf300r-multi__description {
  min-width: 0;
}
.pf300r-multi__description p {
  margin: 0;
  color: var(--body-text);
  font-size: clamp(18px, min(1.6vw, 2.5svh), 32px);
  line-height: 1.35;
}
@media (max-width: 900px) {
  .pf300r-multi__title {
    align-self: center;
    margin-inline: 0;
  }
  .pf300r-multi__lower {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 2.4svh, 22px);
  }
  .pf300r-multi__description {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
  }
}
@media (max-width: 620px) {
  /* Keep the third camera inside the panorama at phone widths. */
  .pf300r-camera-head--one { left: 25%; }
  .pf300r-camera-head--two { left: 58.333333%; }
  .pf300r-camera-head--three { left: 91.666667%; }
  .pf300r-multi__title {
    font-size: clamp(28px, 9vw, 40px);
  }
  .pf300r-multi__description p {
    font-size: clamp(16px, 5vw, 22px);
  }
}
/* ---------- Pricing slides ---------- */
.slide--pricing { display: flex; flex-direction: column; }
.pricing-copy {
  margin: auto;
  padding-bottom: clamp(20px, 6svh, 70px);
  max-width: 620px;
  text-align: center;
}
.pricing-copy .slide-text { max-width: 500px; margin-inline: auto; }
.pricing-copy .product-showcase__pricing {
  justify-content: center;
  gap: 4px 18px;
  margin-top: clamp(16px, 3.6svh, 36px);
}
.pricing-copy .product-showcase__price-choice { flex-direction: column; align-items: center; row-gap: 2px; }
.pricing-copy .product-showcase__price-choice strong { font-size: clamp(34px, min(4.4vw, 7svh), 64px); }
.pricing-copy .product-showcase__price-or { align-self: center; }

/* ---------- B2B ---------- */
.slide--b2b > .slide-surface {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.oem-copy { min-width: 0; max-width: 480px; }
.slide--b2b .oem-table { font-size: clamp(13px, 1.05vw, 16px); }
.slide--b2b .oem-table th { font-size: clamp(12px, .95vw, 15px); }
.slide--b2b .oem-table th,
.slide--b2b .oem-table td { padding-block: clamp(8px, 1.5svh, 14px); }
.oem-copy p:not([class]) {
  margin: clamp(8px, 1.6svh, 14px) 0 0;
  color: var(--body-text);
  font-size: clamp(14px, min(1.15vw, 2.1svh), 17px);
  line-height: 1.6;
}

/* ---------- Contact (last page; the footer sits at its foot) ---------- */
.page--contact { display: flex; flex-direction: column; }
.page--contact > .contact-inner {
  margin-block: auto;
  padding-block: clamp(28px, 6svh, 80px);
}
.page--contact .page-heading { font-size: clamp(42px, min(5.6vw, 10svh), 84px); }
.page--contact > .site-footer { flex: 0 0 auto; }

/* ---------- Narrow screens: one column, media on top ---------- */
@media (max-width: 900px) and (min-height: 501px), (max-width: 599px) {
  .slide--detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "media" "copy";
    row-gap: clamp(10px, 2.4svh, 26px);
    align-items: stretch;
  }
  .slide-copy { justify-self: center; width: 100%; max-width: 640px; }
  .slide-text { max-width: none; }
  .slide-title { font-size: clamp(28px, min(8vw, 5.6svh), 48px); }
  .product-showcase__eyebrow { font-size: 11px; }
  .slide--b2b > .slide-surface { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: clamp(12px, 3svh, 32px); }
  .oem-copy { max-width: 640px; }
  .slide--b2b .oem-table { line-height: 1.42; }
  .slide--b2b .oem-table caption { padding-bottom: 8px; }
  .slide--b2b .oem-table th,
  .slide--b2b .oem-table td { padding-block: clamp(6px, 1.2svh, 12px); }
}

/* ---------- Too short to fit a page (landscape phones, tiny windows) ----------
   Pages grow with their content and the snap only engages near a page. */
@media (max-height: 500px) {
  html { scroll-snap-type: y proximity; }
  .page { height: auto; min-height: var(--page-h); }
  .page-track { height: auto; }
  .slide { height: auto; overflow: visible; }
  .slide--detail { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  /* Room left for a slide's media: the page (less its 1px top border),
     less the slide's top padding and the one-row tab bar under it. */
  .page {
    --tabs-h: calc(clamp(10px, 2.4svh, 26px) + var(--slide-pad-y) + 31px);
    --media-h: calc(var(--page-h) - 1px - var(--slide-pad-y) - var(--tabs-h));
  }
  .slide-media { height: var(--media-h); }
  .hero-stage { flex: none; height: var(--media-h); }
  /* The specs art scales to fit, so its slide is at least that tall and
     stretches with the page, keeping the art just above the tab bar. */
  .slide--specs { min-height: calc(var(--media-h) + var(--slide-pad-y)); }
}

@media (prefers-reduced-motion: reduce) {
  .slide-link span { transition: none; }
}

/* =========================================================================
   Unified product content surfaces
   Every product slide lives within the SAME card system. The scroll snapping
   articles still occupy one full horizontal stop, and tabs stay outside.
   Landing, OEM/B2B, and Contact do not use these rules.
   ========================================================================= */
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) {
  /* One shared outer gutter gives the card equal breathing room on
     all four sides, while keeping the page tabs outside the card. */
  --card-gutter: clamp(20px, 4.6vw, 70px);
  --card-padding-x: clamp(18px, 3.8vw, 52px);
  --card-padding-y: clamp(12px, 2.5svh, 30px);
  --card-surface: color-mix(in srgb, var(--page-bg, #FAF7F0) 91%, #8e7765);
}
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide {
  display: block;
  padding: var(--card-gutter);
  min-width: 0;
}
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide-surface {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--card-padding-y) var(--card-padding-x);
  border: 1px solid rgb(92 72 52 / 11%);
  border-radius: 7px;
  background: var(--card-surface);
  box-shadow: 0 5px 14px rgb(65 49 35 / 9%), 0 1px 3px rgb(65 49 35 / 4%);
  overflow: hidden;
}
/* Shared compositions: all text/media detail pages use the same two-column
   split; all overviews share the same stage; all price pages center content. */
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--detail > .slide-surface {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'copy media';
  column-gap: clamp(20px, 4vw, 64px);
  align-items: stretch;
}
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--hero > .slide-surface,
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--pricing > .slide-surface,
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--specs > .slide-surface {
  display: flex;
  flex-direction: column;
}
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--pricing > .slide-surface {
  justify-content: center;
  align-items: center;
}
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--pricing .pricing-copy {
  margin: 0;
  padding: 0;
}
/* Media and the annotated diagram no longer need their OWN nested card. */
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--spec-card .slide-media,
#pf2500 .slide--specs .spec-stage {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
:is(#pf300r, #beam-break, #frame-shift) .slide--spec-card .slide-media {
  max-width: none;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
#pf2500 .slide--specs > .slide-surface > .slide-title {
  max-width: none;
  align-self: stretch;
  margin-bottom: clamp(6px, 1.2svh, 14px);
}
#pf2500 .slide--specs .spec-stage { max-width: none; }
/* Media presentation keeps its native scale and aspect ratio, never forced
   to the panel width, while it remains centered in the standardized cell. */
:is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide-media { align-items: center; }
:is(#pf300r, #beam-break, #frame-shift) .slide--spec-card .slide-media { align-items: flex-end; }
/* PF300R railcam has its own synchronized-video composition inside the same
   panel. Its internal figure rhythm remains unchanged. */
#pf300r .slide--pf300r-multi > .slide-surface { display: block; padding-inline: clamp(12px, 3vw, 40px); }
#pf300r .slide--pf300r-multi .pf300r-multi { --multi-figure-width: 960px; }
#pf300r .slide--pf300r-multi .pf300r-multi__title { margin-left: 0; }

@media (max-width: 900px) and (min-height: 501px), (max-width: 599px) {
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) {
    --card-gutter: clamp(16px, 3vw, 28px);
    --card-padding-x: clamp(12px, 3vw, 26px);
    --card-padding-y: clamp(10px, 2svh, 22px);
  }
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--detail > .slide-surface {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'media' 'copy';
    row-gap: clamp(8px, 1.8svh, 20px);
  }
}
@media (max-height: 500px) {
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) { --card-gutter: clamp(12px, 3svh, 20px); }
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide { height: auto; }
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide-surface { height: max(350px, var(--media-h, 350px)); }
  :is(#pf2500, #pf300r, #beam-break, #frame-shift, #oem) .slide--detail > .slide-surface {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'copy media';
  }
}

/* PF2500 uses the original balanced, both-sides annotated diagram inside
   the new shared product card; the models reach the card's bottom edge. */
#pf2500 .slide--specs > .slide-surface { padding: 0; }
#pf2500 .slide--specs .spec-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  background: none;
}
#pf2500 .slide--specs .spec-head .slide-title { font-family: var(--font-brand); }
#pf2500 .slide--specs .spec-callout { border-color: #796e62; }
@media (max-width: 560px), (orientation: portrait) {
  #pf2500 .slide--specs .spec-stage { gap: clamp(9px, 1.5svh, 14px); padding-top: 12px; }
  #pf2500 .slide--specs .spec-head { flex: none; padding-left: clamp(14px, 4vw, 30px); }
  #pf2500 .slide--specs .spec-callouts { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #pf2500 .slide--specs .spec-callout { font-size: clamp(11px, 1.9vw, 15px); line-height: 1.28; }
  #pf2500 .slide--specs .spec-figure { overflow: hidden; }
}
@media (max-width: 450px) {
  #pf2500 .slide--specs .spec-callouts { gap: 5px; }
  #pf2500 .slide--specs .spec-callout { font-size: 11px; padding: 5px; }
  #pf2500 .slide--specs .spec-head .slide-title { font-size: 32px; }
}
/* Let the tall product cutouts end at the actual bottom of the shared card,
   not at the last internal padding row. */
:is(#pf300r, #beam-break, #frame-shift) .slide--spec-card .slide-media {
  margin-bottom: calc(-1 * var(--card-padding-y));
}


/* OVERCLOQ_VIEWPORT_GUTTERS_FINAL */
@media (min-width: 1100px) and (min-height: 620px) {

  :is(#pf2500, #pf300r, #beam-break, #frame-shift)
  > .page-track {
    flex: 1 1 auto;
    min-height: 0;
  }

  :is(#pf2500, #pf300r, #beam-break, #frame-shift)
  .page-track > .slide {
    height: 100%;
    padding: var(--card-gutter);
  }

  :is(#pf2500, #pf300r, #beam-break, #frame-shift)
  > .page-tabs {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    z-index: 3;
    padding: 0 var(--card-gutter) clamp(6px, 1svh, 10px);
    pointer-events: none;
  }

  :is(#pf2500, #pf300r, #beam-break, #frame-shift)
  > .page-tabs > * {
    pointer-events: auto;
  }

}
/* B2B capability table: safe overflow on short screens */
#oem .slide--b2b > .slide-surface {
    overflow-y: auto;
}