/* About-section headline morph (Mena 2026-07-21).
   "The dubbing partner behind <morphing phrase>" — the tail cycles
   through the three HVO differentiators with the SAME gooey threshold
   morph as the hero, centred under line 1 (icons removed per Mena).
   Reuses the global #threshold SVG filter defined for the hero. */

/* ── SHARED GOO STAGE (2026-08-27, Mena: "fix all to look like the audience
   one") ──────────────────────────────────────────────────────────────────
   Every morphing headline on this page used to carry its own copy of this
   geometry, and the copies had drifted. Measured on a 440px phone before
   this rule existed: three different type sizes (hero 36px, four sections
   32px, Portal auto-shrunk to 21px), two box behaviours (About frozen at its
   widest phrase, the rest breathing), two filter chains (only .hvo-am had
   the trailing blur) and two cadences.

   This is now the ONE definition, taken VERBATIM from .hvo-am, the stage
   Mena accepted. Per-stage files may still set colour, weight and their own
   line layout. They must not restate anything below. A new morph stage joins
   by being added to these selector lists, not by copying the block. */
.hvo-morph,
.hvo-tm,
.hvo-am,
.hvo-sm,
.hvo-pm,
.hvo-hm {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 1.12em;
  /* No width here on purpose: JS sizes the box to the CURRENT phrase, and
     this transition is what stops a centred line snapping as a short word
     becomes a long one. */
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  /* The trailing blur re-softens the threshold's hard alpha edge. It was on
     the Audience heading alone, and the Audience heading is the reference. */
  filter: url(#threshold) blur(0.6px);
}

.hvo-morph > span,
.hvo-tm > span,
.hvo-am > span,
.hvo-sm > span,
.hvo-pm > span,
.hvo-hm > span {
  position: absolute;
  inset: 0;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  user-select: none;
}

/* Weight belongs to the five section headings. The hero keeps its own 700 in
   hero-morph.css: it is display type, not a section heading. */
.hvo-tm > span,
.hvo-am > span,
.hvo-sm > span,
.hvo-pm > span,
.hvo-hm > span {
  font-weight: 600;
}

/* Phones. The centred one-line headings drop their rotating phrase onto its
   own centred line so the box can grow and shrink without shoving the
   sentence sideways, and so the line never has to shrink its type to fit.
   Measured before this: the Portal lead slid 76px every cycle and its type
   was auto-shrunk to 21px, while the Audience lead never moved a pixel and
   stayed at 32px. The About heading is a left-aligned stack of h2 lines and
   deliberately keeps its own alignment; it gets everything else. */
@media (max-width: 767px) {
  .hvo-pm-line,
  .hvo-hm-line {
    white-space: normal;
  }

  .audience-saying__lead,
  .hvo-pm-lead,
  .hvo-hm-lead,
  .hvo-am,
  .hvo-pm,
  .hvo-hm,
  .hvo-sm {
    display: block;
  }

  .hvo-am,
  .hvo-pm,
  .hvo-hm,
  .hvo-sm {
    margin-inline: auto;
  }

  .hvo-am > span,
  .hvo-pm > span,
  .hvo-hm > span,
  .hvo-sm > span {
    text-align: center;
  }
}

/* reduced motion: no goo, no width animation, first phrase only */
@media (prefers-reduced-motion: reduce) {
  .hvo-morph,
  .hvo-tm,
  .hvo-am,
  .hvo-sm,
  .hvo-pm,
  .hvo-hm {
    filter: none;
    transition: none;
  }

  .hvo-morph > span + span,
  .hvo-tm > span + span,
  .hvo-am > span + span,
  .hvo-sm > span + span,
  .hvo-pm > span + span,
  .hvo-hm > span + span {
    display: none;
  }
}

/* the morph unit is an <h2> so its text inherits the title's type */
.section_about .title-wrap > h2:not(.hvo-tm-h2) {
  font-weight: 400;
}

/* About testimonial card (2026-09-04): two swipeable slides, one avatar each.
   The 2026-08 nth-child background-image hack (four creator faces forced onto
   the avatar row, real <img> hidden) is gone; each slide's <img> is the avatar. */
.section_about .avatars-wrap .avatar-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_about .hvo-about-testimonials {
  width: 100%;
  overflow: hidden;
}
.section_about .hvo-about-testimonials .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.section_about .hvo-nick-testimonial {
  line-height: 1.5;
  width: 100%;
}
.section_about .hvo-nick-testimonial > p {
  margin: 0;
}
.section_about .hvo-nick-testimonial > p + p {
  margin-top: 0.75em;
}
.section_about .hvo-nick-attribution {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.section_about .hvo-nick-name {
  font-weight: 800;
}
.section_about .hvo-nick-role {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.72;
}
/* Desktop grid: the testimonial card spans both right-column rows. With two
   auto rows, its extra height was split evenly, so the black "Languages" stat
   card grew a large empty band. Let the top (green reach) row absorb the
   difference and keep the stat card at its content height. */
@media screen and (min-width: 992px) {
  .section_about .about_layout {
    grid-template-rows: 1fr auto;
  }
}
/* Touch feel (Mena 2026-09-04: "feels a bit laggy" on the phone):
   1. The slider's track gets its own compositing layer up front, so the first
      drag frame does not wait for iOS to promote it.
   2. Snappier settle: shorter duration (JS, 400ms) with an ease-out curve
      instead of Swiper's default symmetric ease.
   3. The gradient-hover blob is a 400px masked gradient layer under every
      card with `will-change: transform, opacity`; iOS never hovers, so on
      coarse pointers it only costs. Dropped for this card (site-wide drop is
      a separate change: 56 pages reference gradient-hover.css). */
.section_about .hvo-about-testimonials {
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.section_about .hvo-about-testimonials .swiper-wrapper {
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  .section_about .card_about.bg-subtle.hvo-glow::before {
    content: none;
  }
}
/* Dots: static row under the slides (not Swiper's absolute default), lime
   for the active slide, quiet for the rest, in both themes. */
.section_about .hvo-about-testimonials-dots.swiper-pagination {
  position: static;
  display: flex;
  justify-content: flex-start;
  gap: 0.375rem;
  margin-top: 1rem;
  width: auto;
}
.section_about .hvo-about-testimonials-dots .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  border-radius: 50rem;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.section_about .hvo-about-testimonials-dots .swiper-pagination-bullet-active {
  background: var(--bg-color--bg-green, #c8f27b);
  opacity: 1;
  transform: scale(1.15);
}

/* Two-line reach metric in the green card: number first, label beneath it. */
.section_about .hvo-reach-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section_about .hvo-reach-numberline {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
}
.section_about .hvo-reach-value,
.section_about .hvo-reach-plus {
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  white-space: nowrap;
}
.section_about .hvo-reach-plus {
  margin-left: 0.04em;
}
.section_about .hvo-reach-label {
  margin-top: 0.15em;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.section_about .hvo-reach-support {
  line-height: 1.45;
}
.section_about .hvo-reach-support > strong {
  font-weight: 800;
}
.section_about .hvo-youtube-brand {
  display: inline;
  white-space: nowrap;
}
.section_about .hvo-youtube-mark {
  display: inline-block;
  width: 1.35em;
  margin-right: 0.25em;
  line-height: 0;
  vertical-align: -0.16em;
}
.section_about .hvo-youtube-mark img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2026-08-27: display:inline-flex + align-items:center used to blockify the
   .hvo-tm stage, which is why About alone computed display:block,
   vertical-align:baseline and height 1.1em while every other stage was
   inline-block / top / 1.12em. Only the weight belongs here. */
.hvo-tm-h2 {
  font-weight: 600;
}


/* Product-section headline mirrors the hero's second line: the lead-in and
   rotating capability behave as one centred sentence. The morph box resizes
   to the visible phrase, so no longest-phrase gap is left on screen. */
.section_portal-demo .hvo-pm-heading-wrap {
  width: 100%;
  max-width: none;
}

.section_portal-demo .hvo-pm-line {
  display: block;
  white-space: nowrap;
}

.section_portal-demo .hvo-pm-lead {
  font-weight: 400;
}