/* Scroll Plus: small reading aids layered on the site, all off under reduced motion.
   - "Read more" arrows inside cards look like what they are: tappable pills.
   - Cards and app illustrations zoom gently into place as they scroll in.
   - Genes: on wide screens the eight cards travel sideways while the page scrolls.
   - Product: the four-step loop plays one step at a time while its heading stays put.
   - Phones get a little less empty space between sections. */

/* 1. Arrow links as pills (cards stay fully clickable) */
.acard-s .go,
.hubcard .go,
.related .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a, #12111c) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a, #12111c) 22%, transparent);
  transition: background 0.25s, box-shadow 0.25s;
}
.acard-s:hover .go,
.hubcard:hover .go,
.acard-s:focus-visible .go,
.hubcard:focus-visible .go {
  background: color-mix(in srgb, var(--a, #12111c) 18%, transparent);
}
[data-dark] .hubcard .go,
.brand-dark .hubcard .go {
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff33;
}

/* 2. Zoom on scroll (progressive: only where the browser supports view timelines) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ui,
    .hubcard,
    .acard-s .orb,
    .gene-orb {
      animation: sp-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}
@keyframes sp-zoom {
  from {
    transform: scale(0.9);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 3. Horizontal track (JS sets --sp-x and the section height) */
.sp-htrack {
  position: relative;
}
.sp-htrack.is-on {
  overflow: visible;
}
.sp-htrack.is-on .sp-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sp-htrack.is-on .genes {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  padding-inline: 72px 48px;
  transform: translate3d(var(--sp-x, 0px), 0, 0);
  will-change: transform;
}
.sp-htrack.is-on .genes > * {
  width: clamp(260px, 24vw, 320px);
  flex: none;
}
.sp-hint {
  display: none;
}
.sp-htrack.is-on .sp-hint {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font: 500 11px/1 var(--mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #5c5a69);
}

/* 4. Scrollytelling: the loop's heading stays, steps light up one at a time */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sp-steps {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: start;
  }
  .sp-steps > .sec-head {
    position: sticky;
    top: 120px;
  }
  .sp-steps .list > li {
    min-height: 42vh;
    display: flex;
    align-items: center;
    opacity: 0.32;
    transition: opacity 0.45s;
  }
  .sp-steps .list > li.on {
    opacity: 1;
  }
  .sp-steps .list > li b {
    font-size: clamp(20px, 1.8vw, 26px);
  }
  .sp-steps .list > li p {
    font-size: 16px;
  }
}

/* 5. Phones: tighter vertical rhythm, comfortable tap targets */
@media (max-width: 600px) {
  section {
    padding-block: clamp(44px, 12vw, 64px);
  }
  .btn,
  .burger,
  .qa > button {
    min-height: 44px;
  }
}

/* 6. Readers who ask for more contrast */
@media (prefers-contrast: more) {
  :root {
    --muted: #3d3b49;
  }
}