/* ==========================================================================
   Small supplement to customers-v2.css, which is installed verbatim from the
   design project and deliberately left unedited.

   The design component expressed two things with inline styles; the generated
   pages use classes instead, so those styles live here. Webflow tokens only.
   ========================================================================== */

/* --- accent phrases inside quotes ---------------------------------------- */
/* The design marked these up as <em style="color:var(--text--accent)">. Italic
   comes from <em>; the closing quote adds a hairline stroke inline. */

.customer_quote-accent,
.customer_closing-accent {
  color: var(--text--accent);
  font-style: italic;
}

/* YTF giong is a display serif: its word space is metrically tight, which is
   right at headline size but leaves the long quotes looking set solid. Open the
   gaps back up on the three blocks that use it for running text. */

.customer_quote-text,
.customer_closing-text,
.customer_feature-text {
  word-spacing: .055em;
}

/* Italic correction. An italic leans forward, so its opening glyph overhangs
   backwards into the preceding word space — the metric space survives, the
   optical space does not. Most visible at "brakes. <em>Before Pi</em>". CSS has
   no italic correction, so pay it back by hand.

   Leading side only. Every accent but one is followed by a comma or a full
   stop, and punctuation has to stay tucked against the word it belongs to;
   trailing padding visibly detaches it ("Before Pi , getting"). The one accent
   that is followed by a space rides on the word-spacing above instead. */

.customer_quote-accent,
.customer_closing-accent,
.customer_feature-accent {
  padding-inline-start: .09em;
}

/* --- video still --------------------------------------------------------- */

.customer_video {
  position: relative;
  margin: 3rem 0 0;
  border-radius: var(--_sizes---border-radium--xmedium);
  overflow: hidden;
  border: 1px solid var(--borders--secondary);
}

.customer_video-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


.customer_video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--text--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px color-mix(in srgb, #fff 25%, transparent);
}




/* The play control and the player itself. customers.js injects the trigger over
   the still and mounts <mux-player> on activation; the poster furniture is
   decorative markup, so none of it needs to survive that swap. */

.customer_video-trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.customer_video-trigger:focus-visible {
  outline: 2px solid var(--text--accent);
  outline-offset: -5px;
  border-radius: var(--_sizes---border-radium--xmedium);
}

/* Keeps the existing centring transform — this only adds the swell. */
.customer_video-play { transition: transform .18s ease, opacity .18s ease; }

.customer_video:hover .customer_video-play,
.customer_video:has(.customer_video-trigger:focus-visible) .customer_video-play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Between the press and the player arriving the poster holds its place, so the
   press needs its own acknowledgement. Usually too brief to see — the script is
   warmed on hover — but not on a cold slow connection. */
.customer_video.is-loading { cursor: progress; }
.customer_video.is-loading .customer_video-play { opacity: .55; }

.customer_video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Playing: the iframe carries the box, so everything else goes. */
.customer_video.is-playing > :not(.customer_video-frame) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .customer_video-play { transition: none; }
}

@media screen and (max-width: 767px) {
  .customer_video { margin-top: 2rem; }
  .customer_video-play { width: 54px; height: 54px; box-shadow: 0 0 0 6px color-mix(in srgb, #fff 25%, transparent); }
}

/* --- timeline on the Webflow page ----------------------------------------- */
/* The Webflow rebuild of the timeline carries its own Designer classes:
   grid steps with place-items:center, a fixed 44px icon row, and — because the
   Designer has no subgrid — no mobile variant at all. Below 767px those rules
   fight the customers-v2 mobile layout (block steps, icons lifted out of flow),
   scattering labels and times. Neutralize just the Designer contributions; the
   generated pages have block steps and no .customer_timeline-node here, so on
   them every declaration is a no-op or restates the customers-v2 value. */

@media screen and (max-width: 767px) {
  .customer_timeline-step {
    display: block !important;
    grid-template-rows: none !important;
    place-items: start !important;
  }
  .customer_timeline-node {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
  }
  .customer_timeline-label { margin: .1rem 0 .3rem !important; }
  .customer_timeline-time  { margin: .3rem 0 0 !important; }

  /* Unlike the rules above, this one fixes customers-v2 itself, on both
     surfaces: its base rule center-aligns the progress line for the desktop
     row, and its mobile block repositions the line (absolute, top/bottom
     insets, height:auto) without resetting that alignment. A center-aligned
     absolutely positioned box shrinks to its content — an empty div, 0px —
     so the growing spine never rendered below 767px. Stretch honours the
     insets again. */
  .customer_timeline-progress { align-self: stretch !important; }
}