@import url('catalog-directions.css');

/* Shared direction palette: one generated source, no recolouring of media. */
.site-menu__sub a[data-cat-dot]::before { background: var(--category-accent); }
[data-direction].is-active { border-color: var(--category-accent); }
.homepage-flow :is(#about, #rental, #docs, #viz, #contacts) .sp-kicker {
  color: var(--stage-accent);
  font-weight: 400;
  letter-spacing: .14em;
}
.homepage-flow :is(#about, #rental, #docs, #viz, #contacts) .sp-kicker::before { opacity: .65; }
#rental { scroll-margin-top: calc(var(--header-h, 68px) + 12px); }

/* Category-pill proportions shared by comparable CTAs, not the unchanged
   Manuals homepage section or specialised menu/video controls. */
body:not(.stage2b) .sp-pill,
.stage2b :is(#about, #rental, #docs, #viz, #contacts) .sp-pill {
  min-height: 52px;
  max-width: 100%;
  width: fit-content;
  padding: 10px 14px 10px 22px;
  border: 1px solid rgba(232, 241, 242, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #e7eaea;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  gap: 14px;
}
body:not(.stage2b) .sp-pill:hover,
.stage2b :is(#about, #rental, #docs, #viz, #contacts) .sp-pill:hover {
  color: #f1f5f5;
  background: rgba(185, 238, 243, .1);
  border-color: rgba(185, 238, 243, .5);
}
body:not(.stage2b) .sp-pill:hover .sp-pill__arrow,
.stage2b :is(#about, #rental, #docs, #viz, #contacts) .sp-pill:hover .sp-pill__arrow { border-color: rgba(231,234,234,.7); }
.stage2b :is(#about, #rental, #docs, #viz, #contacts) .sp-pill:hover .sp-pill__arrow::before { border-color: currentColor; }
.sp-pill:focus-visible { outline: 2px solid #b9eef3; outline-offset: 4px; }
.sp-pills { gap: 10px; }
.homepage-flow #docs .sp-details dd { margin-inline: 0; }
.homepage-flow #docs .sp-details dd ul { margin-block: 8px 22px; padding-left: 1.25em; }
.homepage-flow #docs .sp-details dt { margin-top: 22px; }

/* Full-width line without 100vw (which includes the scrollbar). */
.page-equipment { --equipment-gutter: clamp(24px, 5vw, 72px); }
.page-equipment .equip-main { padding-inline: var(--equipment-gutter); }
.page-equipment .equip-head { max-width: none; }
.page-equipment .equip-cat-bar {
  width: calc(100% + var(--equipment-gutter) * 2);
  margin-inline: calc(var(--equipment-gutter) * -1);
  height: 3px;
  border-radius: 0;
  background: var(--category-accent);
  transform-origin: left center;
  animation: direction-line-reveal 900ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes direction-line-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.page-equipment .equip-cat-nav { margin: 24px 0; }
.page-equipment .equip-subcat-nav { margin-top: 20px; }
.page-equipment .equip-subcat-nav[hidden] { display: none; }
.page-equipment .equip-cat-nav .sp-pill.is-active,
.page-equipment .equip-subcat-nav .sp-pill.is-active {
  border-color: var(--category-accent);
  background: color-mix(in srgb, var(--category-accent) 10%, transparent);
  box-shadow: none;
  transform: none;
}
.page-equipment .equip-card { border-color: color-mix(in srgb, var(--category-accent) 25%, transparent); }
@media (max-width: 640px) {
  .page-equipment .equip-cat-nav .sp-pill { padding-inline: 14px; gap: 8px; }
  .page-equipment .equip-cat-nav .sp-pill__arrow { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-equipment .equip-cat-bar { animation: none; transform: none; }
}

/* Phone crop only: move the manuals scene right and the hero scene left.
   Shared positions keep each poster aligned with its decoded video frame. */
@media (max-width: 520px) {
  .stage2b .sp-hero { --hero-position: 21% 50%; }
  .homepage-flow .sp-outro #downloads.sp-manuals { --manuals-position: 92% 50%; }
}