/* steps.css — "How it works" steps, chips, nav links, responsive grids, and
   the science viz grid. These are the rules that can't be inline (pseudo-states
   + media queries). */
.vss-chip {
  display:inline-flex; align-items:center; height:30px; padding:0 13px;
  border-radius:999px; border:1px solid rgba(7,16,31,.18); background:transparent;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.04em; color:rgba(7,16,31,.58);
}

.vss-navlink:hover { background:rgba(255,255,255,.08); color:#fff !important; }

/* NOTE: [data-step-media] used to declare a hover scale + shadow that was
   immediately cancelled by `.vss-alt [data-step-media]:hover { transform:none
   !important }`. `alt` was always on, so the hover never fired on any build.
   Both rules are removed rather than switching on an effect nobody has seen. */

/* Carousel tracks: scrollbar-width:none covers Firefox; WebKit/Blink need the
   pseudo-element, without which a scrollbar sits across the phone screens. */
.vss-carousel::-webkit-scrollbar { display: none; }

/* ── Product showcase + traction: 3-up on desktop, collapsing below.
   Both grids were hardcoded `repeat(3,1fr)` in an inline style with no query,
   so they stayed 3 columns down to 360px. Inline styles outrank a plain
   selector, hence !important. ───────────────────────────────────────────── */
@media (max-width: 880px) {
  .vss-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .vss-grid-3 { grid-template-columns: 1fr !important; }
}

/* ── Mobile: drop the app + dashboard deep-dives entirely.
   Hiding them costs no extra bandwidth: every image they use is already
   fetched by "Meet Veiss" and "How it works", which both stay. ──────────── */
@media (max-width: 880px) {
  #app, #dashboard { display: none !important; }
}

@media (min-width: 880px) {
  .vss-step { grid-template-columns: 1fr 1fr !important; }
  .vss-step-rev > div:first-child { order: 2; }
  #vss-vizrow { grid-template-columns: 1.5fr 1fr !important; }
}

/* ── "How it works" step spine ───────────────────────────────────────────────
   A hairline in the column gutter — the one strip of space every step shares,
   whichever side its text is on — with a numbered node at each step's centre.

   Why not a return rail back to step 1: the steps alternate sides, so any
   vertical line running back up crosses a media card. Prototyped, discarded.

   Why the ends fade instead of stopping at the first and last node: step
   height is max(media, text) and the media is clamp(260px,30vw,380px) — with
   step 2 taller still — so the node centres move with the viewport. A gradient
   gets the same read with no JS measurement and nothing to keep in sync.

   Only above 880px — that's the same breakpoint at which .vss-step becomes two
   columns and a gutter exists at all. Below it the steps stack and the spine
   would sit on top of the content. ─────────────────────────────────────────── */
@media (min-width: 880px) {
  .vss-steps { position: relative; counter-reset: vss-step; }
  .vss-steps::before {
    content: "";
    position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(to bottom,
      transparent 0,
      rgba(7,16,31,.13) 11%,
      rgba(7,16,31,.13) 89%,
      transparent 100%);
  }
  .vss-step { position: relative; counter-increment: vss-step; }
  .vss-step::before {
    content: counter(vss-step);
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%;
    /* Solid fill, not transparent — the node has to mask the spine running
       behind it, or the line strikes through the number.
       Gold disc with the navy numeral rather than a gold ring with a gold
       numeral: #f5b400 on #ffffff is 1.85:1, well under the 4.5:1 WCAG wants
       for text this size. Inverted it is 10.3:1, and a solid disc reads as
       more emphatically gold from a distance than a hairline ring. */
    background: var(--gold);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: #07101f;
    pointer-events: none; z-index: 2;
  }
}