/* Capabilities strip: a row of cards that travels right to left, sitting in
   the hero under the page's intro. Used on the Product Design landing page
   (index.html, twelve cards) and on AI Projects (eight). This file is only
   linked from those two, so the rules below that touch shared Webflow
   classes reach nothing else.

   The cards are written twice. The second set is aria-hidden, so a screen
   reader is read one set, and it is hidden outright when motion is reduced,
   which leaves a still row of one set. */

/* ---------- making room in the hero ---------- */

/* Both heroes were a fixed height with overflow hidden. The strip is new
   content inside them, so on a short window the row would have been cut off
   at the bottom edge rather than pushing the hero taller. Below 768 the AI
   hero is already height:auto, so only the fixed case is restated. */
.section---hero---product {
  height: auto;
  min-height: 120vh;
}

/* No minimum on the AI hero: with the label and the scroll button gone and
   the strip in their place, 120vh left nearly 300px of empty gradient under
   the cards. The band below the row is now the strip's own bottom margin. */
@media screen and (min-width: 768px) {
  .section---hero---webflow { height: auto; }
}

/* The band under the AI row. One value drives both the strip's bottom margin
   and how much of the blue circle shows, so they cannot drift apart. */
.section---hero---webflow { --cap-band: 160px; }

/* The blue circle is a decoration at z-index 2, and it sits after the strip
   in the source, so it was painting across the leftmost card. It moves to
   the foot of the hero, below the row. It is 400px across, and this offset
   leaves exactly the band showing above the hero's clipped bottom edge. */
.section---hero---webflow .blue-circle {
  /* Anchored by its top edge, not its bottom: the circle is 400px wide on a
     desktop and 150px on a phone, so arithmetic on its height would have put
     it off the bottom of the hero at one size or the other. This lands its
     top on the row's bottom edge whatever size it is, and the hero clips
     the rest. */
  top: calc(100% - var(--cap-band));
  bottom: auto;
}

@media screen and (min-width: 768px) {
  /* Further in than the original -255px, so more of the arc shows now that
     it is the only thing in the band. */
  .section---hero---webflow .blue-circle { left: -90px; }
}

/* Below 1440 this carries a bottom margin of 220px, growing to 300px on a
   phone, which existed to push the small label and the scroll button down to
   the foot of the hero. Both are gone from both pages, and an adjoining
   sibling margin collapses to the larger of the two, so it would have
   swallowed the strip's own spacing and opened a hole under the intro. */
.hero-container { margin-bottom: 0; }

/* Above the hero text there was 130px of clear air under the fixed 70px nav.
   Tightening it lifts the whole hero, and the strip with it. The stylesheet
   steps this value down at each breakpoint and the phone sizes are already
   tight against the nav, so those are mirrored here unchanged rather than
   flattened by an unqualified rule. */
.hero-container { margin-top: 120px; }
@media screen and (max-width: 991px) { .hero-container { margin-top: 110px; } }
@media screen and (max-width: 767px) { .hero-container { margin-top: 70px; } }
@media screen and (max-width: 479px) { .hero-container { margin-top: 100px; } }

/* The AI hero's headline, matched to the Product Design one. The stylesheet
   sets it smaller at all three steps (65/50/43 against 70/50/40), which read
   as two different pages. These are the homepage's exact values.

   .heading-hero-webflow-v2 is also used by ai-applications and
   webflow-projects, but this file is only linked from the home and AI
   Projects pages, so neither of those moves. */
.heading-hero-webflow-v2 { font-size: 70px; line-height: 80px; }
@media screen and (max-width: 767px) {
  .heading-hero-webflow-v2 { font-size: 50px; line-height: 55px; }
}
@media screen and (max-width: 479px) {
  .heading-hero-webflow-v2 { font-size: 40px; line-height: 43px; }
}

/* ---------- the strip ---------- */

.cap {
  /* A block child of the hero, after the column that holds the intro. Not
     inside that column: it centres its flex children and takes margins into
     account doing so, which halved this breakout. Here the containing block
     is the hero's content box, so the margin lands the row at the window's
     edge. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 28px;
  /* The hero is content-driven now, so without this the row would end flush
     against its bottom edge. */
  margin-bottom: 56px;
  /* Above the heroes' decorative circles, which are positioned at z-index 2
     and come after this in the source, so they would otherwise paint over
     the cards. */
  position: relative;
  z-index: 3;
  /* The hero clips, so 100vw can never add a horizontal scrollbar here. */
  overflow: hidden;
}

.cap-intro {
  margin: 0 0 18px;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
  /* Explicit: Webflow's global `p` rule paints with var(--dark), which is
     transparent in this stylesheet. */
  color: var(--grey-1);
}

.cap-intro a {
  color: var(--midnight-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--deep-pink);
}

.cap-intro a:hover { color: var(--deep-pink); }
.cap-intro a:focus-visible { outline: 2px solid var(--royal-blue-accs); outline-offset: 3px; }

.cap-view {
  /* Scrollable in its own right, so the cards are reachable by drag, by
     trackpad and by the arrow keys once focused, not only by waiting. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* The row fades out at both ends rather than being cut off square. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}

.cap-view::-webkit-scrollbar { display: none; }
.cap-view:focus-visible { outline: 2px solid var(--royal-blue-accs); outline-offset: -2px; }

.cap-track {
  --cap-gap: 20px;
  --cap-card: 302px;
  /* How many cards in one set, which is the distance the loop travels. */
  --cap-count: 12;
  display: flex;
  gap: var(--cap-gap);
  width: max-content;
  margin: 0;
  padding: 4px 24px;
  list-style: none;
  animation: cap-scroll var(--cap-speed, 68s) linear infinite;
}

@keyframes cap-scroll {
  from { transform: translateX(0); }
  /* Exactly one set of cards and their gaps. A percentage would be measured
     against the track's border box, which includes its padding, and the row
     would drift by that much on every lap. */
  to   { transform: translateX(calc(-1 * var(--cap-count) * (var(--cap-card) + var(--cap-gap)))); }
}

/* Stop for anyone reading, pointing at, or tabbing into the row. */
.cap-view:hover .cap-track,
.cap-view:focus-within .cap-track { animation-play-state: paused; }

/* AI Projects runs eight cards rather than twelve, with the duration cut to
   match so both pages travel at about the same speed. */
.cap--ai .cap-track {
  --cap-count: 8;
  --cap-speed: 45s;
}

/* Room at the foot of the AI hero for the blue circle to sit in. Two classes
   so this holds against the phone block's .cap margin further down. */
.cap.cap--ai { margin-bottom: var(--cap-band); }

/* ---------- a card ---------- */

.cap-card {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--cap-card);
  padding: 24px 24px 26px;
  border: 1px solid var(--grey-5);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 6, 69, .04), 0 8px 20px rgba(0, 6, 69, .05);
  font-family: var(--font-family);
}

.cap-card svg {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--royal-blue-accs);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cap-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-family);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--midnight-blue);
}

.cap-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--grey-1);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cap-track { animation: none; }
  /* Nothing moves, so the copy should not be doubled. */
  .cap-card[aria-hidden="true"] { display: none; }
  .cap-view { scrollbar-width: thin; }
  .cap-view::-webkit-scrollbar { display: block; height: 8px; }
}

@media screen and (max-width: 767px) {
  .cap { margin-top: 22px; margin-bottom: 40px; }
  /* Shorter cards, so a shorter band and less of the circle. */
  .section---hero---webflow { --cap-band: 110px; }
  .cap-intro { font-size: 15.5px; margin-bottom: 14px; padding: 0 18px; }
  .cap-track { --cap-gap: 14px; --cap-card: 258px; padding: 4px 18px; }
  .cap-card { padding: 20px 20px 22px; border-radius: 14px; }
  .cap-card svg { margin-bottom: 16px; }
  .cap-card h3 { font-size: 17px; }
  .cap-card p { font-size: 14.5px; }
  .cap-view {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
}