/* Conveyor Belt Cleaning Systems page styles.
   Loaded by page-conveyor-belt-cleaning-systems.php before get_header(), with
   electrosteam-style as its dependency. Part one below is the unscoped
   component/explorer furniture; part two is the page layout, scoped to
   .conveyor-page. Nothing here is referenced by style.css. */

/* Component figure grid -------------------------------------------------- */
.sys-components {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.sys-component {
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.sys-component img {
  display: block;
  width: 100%;
  aspect-ratio: 380 / 272;
  object-fit: contain;
  padding: 12px;
  background: var(--white);
}

.sys-component-body {
  padding: 14px 16px 16px;
}

.sys-component h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--navy);
}

.sys-component p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray-text);
}

/* Single figure with caption --------------------------------------------- */
.sys-figure {
  margin: 0 0 20px;
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.sys-figure img,
.sys-figure svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px;
  background: var(--white);
}

.sys-figure figcaption {
  padding: 10px 16px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gray-text);
}

/* Motion ----------------------------------------------------------------- */
/* The component art animates from CSS keyframes inside each SVG file. When
   an SVG is rendered through <img> it runs in its own document, so a
   prefers-reduced-motion rule here cannot reach it. This only dials back
   motion on markup the page itself owns. */
@media (prefers-reduced-motion: reduce) {
  .sys-components *,
  .sys-figure * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Page layout - Benefits sits directly under the Overview and carries the
   belt-type choices in its right column as wide horizontal line cards;
   Resources drops to its own ruled band just above Models and Accessories.
   Everything below is scoped to .conveyor-page so this file stands alone:
   every rule it needs is written here. Colors, fonts and spacing come from
   the style.css tokens only. */

/* PAGE HEADING - the bar, its eyebrow and the .page-heading-sub lede are the
   site-wide rules in style.css now; this file deliberately overrides none of
   them. */

/* =========================================
   STICKY ANCHOR BAR (copied from V4)
   .site-header is the only other sticky element (72px tall)
========================================= */
.conveyor-page .anchor-bar {
  position      : sticky;
  top           : 72px;
  z-index       : 900;
  /* The page gutter lives on the bar, not on .anchor-bar-inner: the inner
     wrapper carries no padding, so the first link starts exactly on the
     max-width edge that the section content below starts on, and narrow
     screens still keep their gutter. */
  padding       : 0 24px;
  background    : var(--white);
  border-bottom : 1px solid var(--gray-light);
  box-shadow    : 0 1px 8px rgba(0, 0, 0, 0.05);
}

.conveyor-page .anchor-bar-inner {
  max-width          : var(--max-width);
  margin             : 0 auto;
  display            : flex;
  gap                : 4px;
  overflow-x         : auto;
  scrollbar-width    : none;
  -ms-overflow-style : none;
}

.conveyor-page .anchor-bar-inner::-webkit-scrollbar {
  display : none;
}

.conveyor-page .anchor-link {
  position        : relative;
  display         : block;
  padding         : 17px 14px 16px;
  font-family     : var(--font-body);
  font-size       : 0.88rem;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.08em;
  color           : var(--gray-text);
  white-space     : nowrap;
  text-decoration : none;
  transition      : color 0.15s;
}

.conveyor-page .anchor-link:hover {
  color           : var(--navy-dark);
  text-decoration : none;
}

.conveyor-page .anchor-link.active {
  color : var(--red);
}

.conveyor-page .anchor-link::after {
  content          : '';
  position         : absolute;
  left             : 14px;
  right            : 14px;
  bottom           : 0;
  height           : 3px;
  background       : var(--red);
  transform        : scaleX(0);
  transform-origin : left center;
  transition       : transform 0.2s ease;
}

.conveyor-page .anchor-link.active::after {
  transform : scaleX(1);
}

/* =========================================
   STORY SECTIONS (V2 rhythm)
========================================= */
.conveyor-page .story-section {
  padding           : 64px 24px;
  scroll-margin-top : 140px;
}

.conveyor-page .story-section--alt {
  background : var(--off-white);
}

/* Resources: its own band, ruled top and bottom. It now sits between two
   off-white sections (Eagle above, Models below), so the band is white -
   off-white here would merge all three into one long grey stretch. */
.conveyor-page .story-section--band {
  padding       : 72px 24px;
  background    : var(--white);
  border-top    : 1px solid var(--gray-light);
  border-bottom : 1px solid var(--gray-light);
}

.conveyor-page .story-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

.conveyor-page .story-split {
  display               : grid;
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
  gap                   : 56px;
  align-items           : start;
}

/* Benefits keeps the default 7fr/5fr split - copy left, belt-type cards right,
   the same proportions V13's benefits band uses. */
.conveyor-page #benefits .story-split {
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
}

.conveyor-page .story-text h2 {
  margin-top : 0;
}

.conveyor-page .story-text--full {
  max-width : 78ch;
}

.conveyor-page .story-lead {
  font-size : 1.08rem;
  color     : var(--navy-dark);
}

/* .inner-prose ul would otherwise re-add disc bullets and an indent */
.conveyor-page .inner-prose ul.check-list {
  list-style : none;
  margin     : 0 0 24px;
  padding    : 0;
}

.conveyor-page .inner-prose ul.check-list li {
  padding : 5px 0 5px 28px;
}

/* Closing CTA of a text column: the list above already carries 24px of
   bottom margin, so this only needs to clear the last line of copy. */
.conveyor-page .story-text .story-cta {
  margin : 4px 0 0;
}

/* =========================================
   OVERVIEW: copy + video poster
========================================= */
.conveyor-page .overview-split {
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
}

.conveyor-page .video-poster {
  display       : block;
  width         : 100%;
  padding       : 10px;
  border        : 1px solid var(--gray-light);
  border-radius : 4px;
  background    : var(--white);
  cursor        : pointer;
  position      : relative;
  transition    : border-color 0.15s ease, box-shadow 0.15s ease;
}

.conveyor-page .video-poster:hover,
.conveyor-page .video-poster:focus-visible {
  border-color : var(--navy-dark);
  box-shadow   : 0 6px 20px rgba(9, 28, 46, 0.14);
}

.conveyor-page .video-poster img {
  display       : block;
  width         : 100%;
  height        : auto;
  aspect-ratio  : 16 / 9;
  object-fit    : cover;
  border-radius : 2px;
}

/* CSS-drawn play badge: red rounded rectangle + white triangle */
.conveyor-page .video-poster-play {
  position       : absolute;
  top            : 50%;
  left           : 50%;
  transform      : translate(-50%, -50%);
  width          : 78px;
  height         : 54px;
  border-radius  : 12px;
  background     : var(--red);
  box-shadow     : 0 4px 16px rgba(9, 28, 46, 0.35);
  transition     : background 0.15s ease, transform 0.15s ease;
}

.conveyor-page .video-poster-play::after {
  content      : '';
  position     : absolute;
  top          : 50%;
  left         : 50%;
  transform    : translate(-42%, -50%);
  border-style : solid;
  border-width : 11px 0 11px 19px;
  border-color : transparent transparent transparent var(--white);
}

.conveyor-page .video-poster:hover .video-poster-play {
  background : var(--red-bright);
  transform  : translate(-50%, -50%) scale(1.06);
}

/* Modal ------------------------------------------------------------------ */
/* The theme reset (`*, *::before, *::after { margin: 0 }` in style.css) wins
   over the UA `dialog { margin: auto }`, which is the only thing that centers
   an open dialog - without it the box lands hard against the top left of the
   viewport. Centering is therefore stated outright here, and stated in a way
   that does not depend on the UA `height: fit-content` either: fixed, pinned
   to the middle, translated back by half its own size. `right/bottom: auto`
   undo the UA `inset-block/inline` pins that apply to `dialog:modal`.
   Width is also capped by viewport height (16 / 9 of the height left over
   after 96px of breathing room), so a short window never pushes the 16:9
   frame off screen. */
.conveyor-page .video-modal {
  position      : fixed;
  top           : 50%;
  left          : 50%;
  right         : auto;
  bottom        : auto;
  transform     : translate(-50%, -50%);
  margin        : 0;
  width         : min(900px, 92vw, calc((100vh - 96px) * 16 / 9));
  max-width     : 900px;
  max-height    : none;
  padding       : 0;
  border        : 0;
  border-radius : 6px;
  background    : var(--navy-deep);
  color         : var(--white);
  overflow      : visible;
  z-index       : 1000;
}

.conveyor-page .video-modal::backdrop {
  background : rgba(9, 28, 46, 0.82);
}

.conveyor-page .video-modal-frame {
  position : relative;
  width    : 100%;
  aspect-ratio : 16 / 9;
}

.conveyor-page .video-modal-frame iframe {
  position : absolute;
  inset    : 0;
  width    : 100%;
  height   : 100%;
  border   : 0;
}

.conveyor-page .video-modal-close {
  position      : absolute;
  top           : -14px;
  right         : -14px;
  width         : 40px;
  height        : 40px;
  border-radius : 50%;
  border        : 2px solid var(--white);
  background    : var(--red);
  color         : var(--white);
  font-size     : 1.2rem;
  line-height   : 1;
  cursor        : pointer;
  z-index       : 2;
}

.conveyor-page .video-modal-close:hover {
  background : var(--red-bright);
}

/* =========================================
   RESOURCES STRIP (V2)
========================================= */
.conveyor-page .resource-row {
  display   : flex;
  flex-wrap : wrap;
  gap       : 14px;
  margin    : 0;
}

.conveyor-page .resource-row .product-download-btn {
  flex : 0 1 auto;
}

/* =========================================
   BELT-TYPE CHOICE CARDS - the right column of #benefits
   Dry steam V13's WIDE horizontal .dsc-line-card shape, imported and re-scoped
   here so this file stands alone: thumb left at V13's enlarged size (130px
   column / 93px tall), text right, red accent on the left edge, stacked.
========================================= */
.conveyor-page .belt-choice-col {
  min-width : 0;
  /* Two cards are shorter than the benefits copy beside them, so the column
     is pinned to the top of the split and reads as a deliberate rail rather
     than as a half-filled second column. Nothing follows the cards now that
     the system photo has gone, so the cards themselves carry the column:
     roomier padding, a taller thumb and a wider gap below. */
  align-self : start;
}

.conveyor-page .belt-choice-label {
  margin         : 0 0 12px;
  font-family    : var(--font-body);
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--red);
}

.conveyor-page .belt-cards {
  display        : flex;
  flex-direction : column;
  gap            : 20px;
}

.conveyor-page .belt-card {
  display               : grid;
  grid-template-columns : 150px minmax(0, 1fr);
  column-gap            : 24px;
  align-items           : center;
  background            : var(--white);
  border                : 1px solid var(--gray-light);
  border-left           : 3px solid var(--red);
  border-radius         : 0 6px 6px 0;
  padding               : 22px 26px;
  box-shadow            : 0 2px 10px rgba(9, 28, 46, 0.07);
  color                 : inherit;
  text-decoration       : none !important;
  transition            : border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.conveyor-page .belt-card:hover,
.conveyor-page .belt-card:focus-visible {
  border-left-color : var(--red-bright);
  box-shadow        : 0 8px 24px rgba(9, 28, 46, 0.16);
  transform         : translateX(2px);
}

.conveyor-page .belt-card-figure {
  width         : 100%;
  height        : 115px;
  object-fit    : contain;
  background    : var(--white);
  border-radius : 4px;
}

.conveyor-page .belt-card-body {
  display        : flex;
  flex-direction : column;
  min-width      : 0;
}

.conveyor-page .belt-card-title {
  display       : block;
  font-family   : var(--font-body);
  font-size     : 1.02rem;
  font-weight   : 700;
  line-height   : 1.25;
  color         : var(--navy-dark);
  margin-bottom : 5px;
}

/* The belt type the card answers to, under the system name: the site's
   eyebrow treatment (red, uppercase, letterspaced) one step down in size. */
.conveyor-page .belt-card-kicker {
  display        : block;
  font-family    : var(--font-body);
  font-size      : 0.72rem;
  font-weight    : 700;
  line-height    : 1.2;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--red);
  margin-bottom  : 7px;
}

.conveyor-page .belt-card-text {
  display     : block;
  font-size   : 0.84rem;
  line-height : 1.5;
  color       : var(--gray-text);
}

.conveyor-page .belt-card:hover .belt-card-title {
  color : var(--red);
}

/* =========================================
   EXPLORER: status bar on top, component rail beside the stage, caption below
   The three pieces read as one panel: the status bar owns the top corners, the
   caption owns the bottom ones, nothing in between carries a radius.
========================================= */
.conveyor-page .story-section--explore .story-split {
  grid-template-columns : minmax(0, 5.5fr) minmax(0, 6.5fr);
}

/* Eagle mirrors the columns with `order`, so the explorer lands in the second
   track: swap the ratio there to keep the figure column the narrow one. */
.conveyor-page .story-section--explore.story-section--figure-right .story-split {
  grid-template-columns : minmax(0, 6.5fr) minmax(0, 5.5fr);
}

/* Markup order is explorer-then-text so small screens get the figure first;
   the Eagle section mirrors it back on wide screens. */
.conveyor-page .story-section--figure-right .explorer-col {
  order : 2;
}

.conveyor-page .story-section--figure-right .story-text {
  order : 1;
}

.conveyor-page .explorer-col {
  position : sticky;
  top      : 148px;
}

.conveyor-page .explorer {
  min-width : 0;
  max-width : 100%;

  /* Two numbers drive the stage row: the width of the component rail, and the
     floor under the stage. Five component boxes have to fit the stage height
     without the rail scrolling, and the Eagle scene is more than twice as wide
     as it is tall, so the stage gets a minimum height instead. The art is
     always `contain`ed inside the stage - never stretched to fill it. */
  --strip-w     : 160px;
  --stage-min-h : 355px;
}

/* Status bar ------------------------------------------------------------- */
/* One slot, two occupants: the hint while the full system is on the stage, the
   back control once a component is chosen. Both sit in the same bar so the
   swap moves no other piece of the panel. */
.conveyor-page .explorer-status {
  background    : var(--white);
  border        : 1px solid var(--gray-light);
  border-radius : 4px 4px 0 0;
}

.conveyor-page .story-section--alt .explorer-status {
  background : var(--off-white);
}

/* The hint borrows the back control's type treatment exactly - it is the same
   bar, one line of the same voice - and nothing else: no pointer, no hover, no
   focus stop. It is a label, not a control. */
.conveyor-page .stage-hint,
.conveyor-page .stage-back {
  display        : flex;
  align-items    : center;
  gap            : 9px;
  width          : 100%;
  margin         : 0;
  padding        : 10px 18px;
  background     : transparent;
  border         : 0;
  border-radius  : 0;
  font-family    : var(--font-body);
  font-size      : 0.78rem;
  font-weight    : 700;
  line-height    : 1.35;
  letter-spacing : 0.03em;
  text-transform : uppercase;
  text-align     : left;
  color          : var(--navy-dark);
}

/* Indented by exactly the caret plus its gap, so the hint and the back label
   start on the same x and the swap reads as one line changing its mind. */
.conveyor-page .stage-hint {
  padding-left : 35px;
  cursor       : default;
}

.conveyor-page .stage-hint[hidden],
.conveyor-page .stage-back[hidden] {
  display : none;
}

.conveyor-page .stage-back {
  cursor     : pointer;
  transition : color 0.15s ease;
}

.conveyor-page .stage-back:hover {
  color : var(--red);
}

.conveyor-page .stage-back:focus-visible {
  outline        : 2px solid var(--navy);
  outline-offset : -2px;
}

/* Left-pointing caret, drawn from two borders on a rotated square */
.conveyor-page .stage-back-caret {
  flex             : 0 0 auto;
  width            : 8px;
  height           : 8px;
  border-left      : 2px solid currentColor;
  border-bottom    : 2px solid currentColor;
  transform        : rotate(45deg);
  transform-origin : center;
}

/* Stage row: component rail left, stage right ---------------------------- */
.conveyor-page .stage-row {
  display               : grid;
  grid-template-columns : var(--strip-w) minmax(0, 1fr);
  background            : var(--white);
  border                : 1px solid var(--gray-light);
  border-top            : 0;
}

/* The rail is a bare positioning frame: its only child is taken out of flow,
   so the row height comes from the stage alone and the rail is stretched to
   match it. If the boxes ever outgrow that height they scroll inside it -
   the stage is never pulled out of shape to make room. */
.conveyor-page .component-picker {
  position     : relative;
  min-width    : 0;
  border-right : 1px solid var(--gray-light);
  background   : var(--white);
}

.conveyor-page .component-tabs {
  position           : absolute;
  inset              : 0;
  display            : flex;
  flex-direction     : column;
  gap                : 3px;
  align-items        : stretch;
  /* The five boxes span the stage height rather than bunching at the top, so
     the rail reads as a column the height of the art beside it. If they ever
     outgrow it they pack to the top and scroll instead. */
  justify-content    : space-between;
  padding            : 6px 0px;
  background         : transparent;
  border             : 0;
  border-radius      : 0;
  overflow-x         : hidden;
  overflow-y         : auto;
  scrollbar-width    : none;
  -ms-overflow-style : none;
}

.conveyor-page .component-tabs::-webkit-scrollbar {
  display : none;
}

/* A component box in the rail: thumb left, name right. The name beside the
   thumb rather than under it is what lets five boxes stand inside the height
   of the stage with the thumb still large enough to read. */
.conveyor-page .component-tab {
  position       : relative;
  flex           : 0 0 auto;
  display        : flex;
  flex-direction : row;
  align-items    : center;
  gap            : 8px;
  padding        : 6px 6px 6px 6px;
  border         : 0;
  border-radius  : 3px;
  background     : transparent;
  cursor         : pointer;
  text-align     : left;
  transition     : background 0.15s ease, color 0.15s ease;
}

.conveyor-page .component-tab:hover {
  background : var(--off-white);
}

.conveyor-page .component-tab-thumb {
  display    : block;
  width      : 50px;
  height     : 50px;
  object-fit : contain;
  flex       : 0 0 auto;
}

.conveyor-page .component-tab-label {
  flex           : 1 1 auto;
  min-width      : 0;
  font-family    : var(--font-body);
  font-size      : 0.75rem;
  font-weight    : 600;
  line-height    : 1.25;
  letter-spacing : 0.01em;
  text-transform : none;
  color          : var(--gray-text);
  /* last-resort break: a single long word (TOUCHSCREEN) must not spill out of
     the rail */
  overflow-wrap  : break-word;
  transition     : color 0.15s ease;
}

.conveyor-page .component-tab[aria-selected="true"] .component-tab-label {
  color : var(--red);
}

/* Red active marker, same idiom as the anchor bar. It sits on the edge facing
   the art: the right edge in the vertical rail, the top edge once the rail
   turns back into a row under the stage on a phone. */
.conveyor-page .component-tab::after {
  content          : '';
  position         : absolute;
  top              : 5px;
  bottom           : 5px;
  right            : 0;
  width            : 3px;
  height           : auto;
  background       : var(--red);
  transform        : scaleY(0);
  transform-origin : center top;
  transition       : transform 0.2s ease;
}

.conveyor-page .component-tab[aria-selected="true"]::after {
  transform : scaleY(1);
}

.conveyor-page .component-tab:focus-visible {
  outline        : 2px solid var(--navy);
  outline-offset : -2px;
}

/* Stage ------------------------------------------------------------------ */
/* The border lives on .stage-row now, so the stage itself only holds the art. */
.conveyor-page .scene-stage {
  position     : relative;
  width        : 100%;
  aspect-ratio : var(--stage-ratio, 4 / 3);
  min-height   : var(--stage-min-h, 0px);
  background   : var(--white);
  overflow     : hidden;
}

.conveyor-page .stage-panel {
  position        : absolute;
  inset           : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 14px;
}

.conveyor-page .stage-panel[hidden] {
  display : none;
}

.conveyor-page .stage-panel img,
.conveyor-page .stage-panel svg {
  display    : block;
  width      : 100%;
  height     : 100%;
  object-fit : contain;
}

/* The caption closes the explorer stack, so it owns the bottom corners. */
.conveyor-page .stage-caption {
  margin        : 0;
  padding       : 16px 18px 18px;
  background    : var(--off-white);
  border        : 1px solid var(--gray-light);
  border-top    : 0;
  border-radius : 0 0 4px 4px;
}

.conveyor-page .story-section--alt .stage-caption {
  background : var(--white);
}

.conveyor-page .stage-caption-h3 {
  margin      : 0 0 6px;
  font-family : var(--font-body);
  font-size   : 1.02rem;
  font-weight : 700;
  line-height : 1.3;
  color       : var(--navy-dark);
}

.conveyor-page .stage-caption-p {
  margin      : 0;
  font-size   : 0.92rem;
  line-height : 1.6;
  color       : var(--gray-text);
}

/* Hotspots --------------------------------------------------------------- */
.conveyor-page .hotspot {
  cursor : pointer;
}

.conveyor-page .hotspot-hit {
  fill : rgba(255, 255, 255, 0.001);
}

.conveyor-page .hotspot-ring {
  fill             : none;
  stroke           : var(--red);
  stroke-width     : 1.5;
  transform-box    : fill-box;
  transform-origin : center;
  animation        : conveyor-hotspot-pulse 2.4s ease-out infinite;
}

.conveyor-page .hotspot-dot {
  fill       : var(--red);
  transition : fill 0.15s ease;
}

.conveyor-page .hotspot:hover .hotspot-dot,
.conveyor-page .hotspot:focus-visible .hotspot-dot,
.conveyor-page .hotspot.is-active .hotspot-dot {
  fill : var(--navy-dark);
}

.conveyor-page .hotspot.is-active .hotspot-ring {
  stroke       : var(--navy-dark);
  stroke-width : 3;
  animation    : none;
  opacity      : 1;
}

.conveyor-page .hotspot:focus-visible {
  outline        : 2px solid var(--navy);
  outline-offset : 2px;
}

@keyframes conveyor-hotspot-pulse {
  0%   { transform : scale(0.75); opacity : 0.9; }
  70%  { transform : scale(1.65); opacity : 0;   }
  100% { transform : scale(1.65); opacity : 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .conveyor-page .hotspot-ring {
    animation : none;
    opacity   : 0.85;
  }
}

/* =========================================
   MODELS AND ACCESSORIES
========================================= */
/* The grid keeps the theme's global .accessory-grid columns (4 -> 2 -> 1). */

.conveyor-page .models-intro {
  max-width : 78ch;
}

/* =========================================
   RESPONSIVE
========================================= */
/* Below ~1300px the explorer column is narrower: the rail and its boxes step
   down with it so the stage keeps as much width as possible. */
@media (max-width: 1300px) {
  .conveyor-page .explorer {
    --strip-w     : 138px;
    --stage-min-h : 310px;
  }

  .conveyor-page .component-tab {
    gap     : 6px;
    padding : 6px 6px 6px 5px;
  }

  .conveyor-page .component-tab-thumb {
    width  : 40px;
    height : 40px;
  }

  /* The rail label has to hold the longest single word (TOUCHSCREEN) on one
     line at every width, or overflow-wrap chops it mid-word. */
  .conveyor-page .component-tab-label {
    font-size      : 0.55rem;
    letter-spacing : 0;
  }
}

@media (max-width: 1100px) {
  .conveyor-page .story-split,
  .conveyor-page .overview-split,
  .conveyor-page #benefits .story-split,
  .conveyor-page .story-section--explore .story-split,
  .conveyor-page .story-section--explore.story-section--figure-right .story-split {
    gap : 30px;
  }

  /* The thumb column steps down with the card, not the copy. */
  .conveyor-page .belt-card {
    grid-template-columns : 116px minmax(0, 1fr);
    column-gap            : 18px;
  }

  .conveyor-page .belt-card-figure {
    height : 84px;
  }

  /* A rail beside the art would leave the stage under ~300px wide here, so the
     component boxes go back to a scrolling row UNDER the stage (`order`, so the
     DOM keeps rail-then-stage). The stage drops its height floor at the same
     time: at full column width the art needs no letterboxing. */
  .conveyor-page .explorer {
    --stage-min-h : 0px;
  }

  .conveyor-page .stage-row {
    grid-template-columns : minmax(0, 1fr);
  }

  .conveyor-page .component-picker {
    position     : static;
    order        : 2;
    border-right : 0;
    border-top   : 1px solid var(--gray-light);
  }

  .conveyor-page .component-tabs {
    position        : static;
    flex-direction  : row;
    justify-content : flex-start;
    gap             : 3px;
    padding        : 4px 6px 8px;
    overflow-x     : auto;
    overflow-y     : hidden;
  }

  .conveyor-page .component-tab {
    flex           : 1 0 96px;
    min-width      : 96px;
    flex-direction : column;
    align-items    : center;
    gap            : 6px;
    padding        : 10px 4px 12px;
    text-align     : center;
  }

  .conveyor-page .component-tab-label {
    flex      : 0 0 auto;
    font-size : 0.6rem;
  }

  /* Marker back on the top edge - the side facing the art again. */
  .conveyor-page .component-tab::after {
    top              : 0;
    bottom           : auto;
    left             : 6px;
    right            : 6px;
    width            : auto;
    height           : 3px;
    transform        : scaleX(0);
    transform-origin : left center;
  }

  .conveyor-page .component-tab[aria-selected="true"]::after {
    transform : scaleX(1);
  }
}

@media (max-width: 900px) {
  .conveyor-page .story-section {
    padding : 44px 20px;
  }

  .conveyor-page .story-section--band {
    padding : 48px 20px;
  }

  /* minmax(0, 1fr), not 1fr: the tab strip's min-content width would
     otherwise widen the column and push the whole page sideways */
  .conveyor-page .story-split,
  .conveyor-page .overview-split,
  .conveyor-page #benefits .story-split,
  .conveyor-page .story-section--explore .story-split,
  .conveyor-page .story-section--explore.story-section--figure-right .story-split {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 32px;
  }

  /* Single column: the explorer first, copy below (Eagle included) */
  .conveyor-page .explorer-col,
  .conveyor-page .story-section--figure-right .explorer-col {
    position : static;
    order    : 0;
  }

  .conveyor-page .story-section--figure-right .story-text {
    order : 0;
  }

  /* One column here, so the card rail is capped: full width would stretch each
     wide card far past its thumb. */
  .conveyor-page .belt-choice-col {
    max-width : 780px;
  }

  /* Full-width column again: the box goes back to its roomy size */
  .conveyor-page .component-tab {
    flex      : 0 0 106px;
    min-width : 106px;
    padding   : 10px 6px 12px;
  }

  .conveyor-page .component-tab-thumb {
    width  : 48px;
    height : 48px;
  }

  .conveyor-page .component-tab-label {
    font-size      : 0.66rem;
    letter-spacing : 0.02em;
  }
}

@media (max-width: 700px) {
  .conveyor-page .anchor-bar {
    padding : 0 12px;
  }

  .conveyor-page .anchor-link {
    padding   : 14px 10px 13px;
    font-size : 0.8rem;
  }

  .conveyor-page .anchor-link::after {
    left  : 10px;
    right : 10px;
  }

  .conveyor-page .video-modal-close {
    top   : -12px;
    right : -6px;
  }
}

@media (max-width: 560px) {
  /* The wide card keeps its shape on a phone, one size down. */
  .conveyor-page .belt-card {
    grid-template-columns : 105px minmax(0, 1fr);
    column-gap            : 16px;
    padding               : 14px 16px;
  }

  .conveyor-page .belt-card-figure {
    height : 78px;
  }

  .conveyor-page .belt-card-title {
    font-size : 0.98rem;
  }
}