/* Stacked panel scaffold.
   Each scene is a scroll track; its panel is sticky at the very top so the
   expanded panel covers the fixed global nav (z-index 200).

   The overlap between scenes MUST be at least one panel height (100svh), or
   the outgoing panel unpins before the incoming one has covered it and a gap
   flashes through. With that fixed at -100svh, scene height decomposes as:

     dead scroll  = scene height - 200svh   (cards pinned, nothing moving yet)
     orbit travel = 100svh                  (fixed: bottom of screen to top)
     orbit dwell  = scene height - 100svh   (orbit pinned after arriving)

   Cards are 200svh precisely so the dead term is ZERO: the frame the cards
   stop moving is the frame the orbit starts rising over them. Any larger and
   you get scroll where the page visibly does nothing. The 100svh travel is
   not tunable — it is how far anything must move to cross a viewport. */
body.index-page .home-model-stack {
  position: relative;
  width: 100%;
  /* Flush with the section above, never overlapping it: pulled up, the first
     panel peeks into view while Ruty is still expanded and reads as a tab
     stuck to the bottom edge rather than as the next panel arriving. */
  margin-top: 0;
}

body.index-page .home-model-stack-scene {
  position: relative;
  z-index: var(--scene-z, 1);
  pointer-events: none;
}

body.index-page .home-model-stack-scene--cards { height: 200svh; }
body.index-page .home-model-stack-scene--orbit { height: 140svh; }

body.index-page .home-model-stack-scene + .home-model-stack-scene {
  margin-top: -100svh;
}

body.index-page .home-model-stack-panel {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: hidden auto !important;
  border: 0 !important;
  border-radius: var(--panel-radius-live, 0px) !important;
  /* The inset is clipped off, not subtracted from the width — see the note in
     home-benchmark-stage.js. Keeping the panel at a constant 100% also settles
     .home-benchmark-inner, whose min(1580px, 100% - 64px) used to resolve
     against the shrinking panel and rewrap the headline mid-entry. */
  clip-path: inset(0 calc(var(--panel-inset, 0px) / 2) round var(--panel-radius-live, 0px));
  transform: translate3d(0, var(--panel-y, 0px), 0) scale(var(--panel-scale, 1));
  transform-origin: center bottom;
  /* No box-shadow. An upward shadow on the incoming panel smears a grey band
     over the section it is covering, which reads as grime rather than depth.
     The panels are already distinct by colour. */
  pointer-events: auto;
  will-change: transform, clip-path;
}

/* Reads as page background: no card edge, no lift, and no compositor layer
   reserved for an entry that never runs. Its scene also sits below the
   floating nav (z 200), so the nav passes over it like over any section. */
body.index-page .home-model-stack-panel[data-panel-flat] {
  will-change: auto;
}

body.index-page .home-benchmark-panel {
  background: #fff;
  color: #090909;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

body.index-page .home-benchmark-inner {
  width: min(1580px, calc(100% - 64px));
  min-height: 100%;
  margin: 0 auto;
  /* 62px clears the floating nav pill (top 16 + height 46), which now passes
     over this section instead of being covered by it. */
  padding: calc(62px + clamp(22px, 3vh, 44px)) 0 clamp(54px, 7vh, 84px);
}

/* Type comes from the shared scale in assets/css/cnw-type-scale.css — this
   section is where it was approved from, so it must not drift on its own. */
body.index-page .home-benchmark-kicker {
  margin: 0 0 14px;
  color: var(--cnw-eyebrow-ink);
  font-size: var(--cnw-eyebrow-size);
  font-weight: var(--cnw-eyebrow-weight);
  line-height: var(--cnw-eyebrow-leading);
  letter-spacing: var(--cnw-eyebrow-tracking);
  text-transform: uppercase;
}

body.index-page .home-benchmark-inner > h2 {
  max-width: 1120px;
  margin: 0;
  color: var(--cnw-display-ink);
  font-size: var(--cnw-display-size);
  font-weight: var(--cnw-display-weight);
  line-height: var(--cnw-display-leading);
  letter-spacing: var(--cnw-display-tracking);
  text-transform: none !important;
  text-wrap: balance;
}

body.index-page .home-benchmark-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(46px, 5vh, 70px);
}

body.index-page .home-benchmark-tab {
  --benchmark-fill: #826d97;
  position: relative;
  min-height: clamp(300px, 44vh, 500px);
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 2.6vw, 44px);
  overflow: hidden;
  border-radius: 18px;
  background: #f1f1f1;
  color: #090909;
  text-decoration: none;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .012);
}

body.index-page .home-benchmark-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--benchmark-fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 860ms cubic-bezier(.2, .75, .16, 1);
  will-change: transform;
}

body.index-page .home-benchmark-tab:hover::before,
body.index-page .home-benchmark-tab:focus-visible::before {
  transform: scaleY(1);
}

body.index-page .home-benchmark-tab--research { --benchmark-fill: #826d97; }
body.index-page .home-benchmark-tab--data { --benchmark-fill: #b39c84; }
body.index-page .home-benchmark-tab--models { --benchmark-fill: #88a3bb; }

body.index-page .home-benchmark-tab > * { position: relative; z-index: 1; }

body.index-page .home-benchmark-tab-icon {
  width: 64px;
  height: 64px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  line-height: 1;
  transition: transform 350ms ease;
}

body.index-page .home-benchmark-tab:hover .home-benchmark-tab-icon,
body.index-page .home-benchmark-tab:focus-visible .home-benchmark-tab-icon { transform: translateY(-3px); }

body.index-page .home-benchmark-tab-icon svg { width: 30px; height: 30px; display: block; }

body.index-page .home-benchmark-tab--research .home-benchmark-tab-icon { color: #7d678d; }
body.index-page .home-benchmark-tab--data .home-benchmark-tab-icon { color: #a58b70; }
body.index-page .home-benchmark-tab--models .home-benchmark-tab-icon { color: #7697b2; }

body.index-page .home-benchmark-tab h3 {
  max-width: 440px;
  margin: clamp(54px, 6vh, 78px) 0 0;
  font-size: var(--cnw-heading-size);
  font-weight: var(--cnw-heading-weight);
  line-height: var(--cnw-heading-leading);
  letter-spacing: var(--cnw-heading-tracking);
  text-transform: none !important;
  text-wrap: balance;
}

body.index-page .home-benchmark-tab p {
  margin: auto 0 0;
  max-width: 470px;
  padding-top: 24px;
  color: var(--cnw-body-ink);
  font-size: var(--cnw-body-size);
  line-height: var(--cnw-body-leading);
}

body.index-page .home-benchmark-tab b {
  align-self: flex-start;
  min-height: 42px;
  margin-top: 28px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .42);
  color: #090909;
  font-size: var(--cnw-label-size);
  font-weight: var(--cnw-label-weight);
  transition: color 300ms ease, background 300ms ease, transform 220ms ease;
}

body.index-page .home-benchmark-tab:hover b,
body.index-page .home-benchmark-tab:focus-visible b {
  background: #050505;
  color: #fff;
  transform: translateY(-2px);
}

body.index-page .home-benchmark-tab:focus-visible { outline: 3px solid rgba(0, 0, 0, .32); outline-offset: 5px; }

@media (max-width: 900px) {
  body.index-page .home-model-stack-scene--cards { height: 200svh; }
  body.index-page .home-model-stack-scene--orbit { height: 130svh; }
  body.index-page .home-benchmark-inner { width: calc(100% - 36px); padding-top: calc(62px + 16px); }
  body.index-page .home-benchmark-tabs { gap: 7px; margin-top: 30px; }
  body.index-page .home-benchmark-tab { min-height: 320px; padding: 23px; }
  body.index-page .home-benchmark-tab p { font-size: 14px; }
}

@media (max-width: 680px) {
  body.index-page .home-benchmark-inner { height: auto; padding-bottom: 40px; }
  body.index-page .home-benchmark-tabs { grid-template-columns: 1fr; }
  body.index-page .home-benchmark-tab { min-height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  body.index-page .home-model-stack { margin-top: 0; }
  /* Nothing pins, so the scenes must drop back below the fixed nav. */
  body.index-page .home-model-stack-scene--cards,
  body.index-page .home-model-stack-scene--orbit { z-index: auto; height: auto; pointer-events: auto; }
  body.index-page .home-model-stack-scene + .home-model-stack-scene { margin-top: 0; }
  body.index-page .home-model-stack-panel {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    border-radius: 0 !important;
    clip-path: none;
    transform: none;
  }
  body.index-page .home-benchmark-tab::before,
  body.index-page .home-benchmark-tab-icon,
  body.index-page .home-benchmark-tab b { transition-duration: .01ms !important; }
}