/* ==========================================================================
   homepage.css: sections used only on the homepage, loaded on the homepage only
   Hero and hero visual, trio, stages nav, stage sections, proof stats,
   industry leaders, workflow, reviews. When one of these starts being used
   on other pages, move its rules to core.css.
   ========================================================================== */
/* ==========================================================================
   SECTION: Hero
   ========================================================================== */
.hero {
  padding: 40px 0 0;
  text-align: center;
}

.hero__container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 20px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
a.rating,
a.rating:hover { color: inherit; text-decoration: none; }

.hero__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -1.664px;
  color: var(--color-core-700); /* fallback without gradient text */
  background: linear-gradient(100deg,
    var(--color-core-800) 0%,
    var(--color-core-700) 30%,
    var(--color-core-500) 50%,
    var(--color-core-700) 70%,
    var(--color-core-800) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heading-sweep 12s ease-in-out infinite alternate;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}

.hero__subhead {
  margin: 0;
  max-width: 712px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

.hero__ctas {
  display: flex;
  gap: 12px;
}

.hero__ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 0 0;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
}

.rating__star {
  /* No amber/gold in the current token set — leaving literal until there's
     a --color-rating or similar semantic to hang this off. */
  color: #ffb800;
}

.rating__number {
  color: var(--color-text);
}

.rating__label {
  color: var(--color-core-neutral-500);
}

.rating__logo {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.rating__logo svg {
  height: 14px;
  width: auto;
  display: block;
}

.rating__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
}

/* ==========================================================================
   Hero visual: background image + logo row + product mockup
   (Figma: hp26-hero-image-growth-engine, 1200 x 572)
   Every layer is positioned in proportion to the Figma frame, so the whole
   composition scales as one piece. Sizes use container query units:
   1cqw = 1% of the frame's width.
   ========================================================================== */

.hero__visual {
  position: relative;
  container-type: inline-size;
  width: calc(100% - 40px);
  max-width: 1560px;
  aspect-ratio: 1200 / 572;
  margin: 60px auto 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  /* Shown until the background image has loaded */
  background: linear-gradient(120deg, #f5793b 0%, #c8105b 50%, #4a0a4a 100%);
}

.hero__visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo row: 1000 x 84 at 100 / 29 in the Figma frame, logos spread evenly */
.hero__logos {
  position: absolute;
  top: 5.07%;
  left: 8.33%;
  width: 83.33%;
  height: 14.69%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

/* Reset the old theme's list styling, including its check-mark bullets */
.hero__logos li {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.hero__logos li::before { content: none; display: none; }

/* Logos limited in both directions, so long wordmarks don't dominate.
   32px tall at a 1200px-wide frame (the Figma size), scaling with the frame. */
.hero__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 2.67cqw;
  max-width: 11cqw;
}

/* Linked logos: no stray space under the image */
.hero__logo-link {
  display: block;
  line-height: 0;
}

/* Logo row: hovering one logo fades the others back and lifts it slightly */
@media (hover: hover) {
  .hero__logos li {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .hero__logos:hover li { opacity: 0.45; }
  .hero__logos li:hover {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Mockup: 1000px wide at 100 / 135 in the Figma frame; the frame crops its bottom */
.hero__visual-mockup {
  position: absolute;
  top: 23.6%;
  left: 8.33%;
  width: 83.33%;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.hero__visual-mockup-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Depth on scroll (CSS only): the mockup starts tilted back and small, then
   rises, straightens and lands slightly larger than its design size; the
   background drifts the other way and the logos lift away. Static for
   "Reduce motion" and in browsers without support. */
.hero__visual { perspective: 1200px; }

@keyframes hero-mockup-land {
  from { transform: rotateX(16deg) scale(0.92); }
  to   { transform: rotateX(0) scale(1.06); }
}
@keyframes hero-bg-drift {
  from { transform: scale(1.08) translateY(-2%); }
  to   { transform: scale(1.08) translateY(3%); }
}
@keyframes hero-logos-lift {
  to { transform: translateY(-35%); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__visual-mockup {
      transform-origin: 50% 100%;
      animation: hero-mockup-land linear both;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }
    .hero__visual-bg {
      animation: hero-bg-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
    .hero__logos {
      animation: hero-logos-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }
  }
}

/* Heatmap trail behind the pointer (created by script.hp26.js) */
.hero__heat {
  position: absolute;
  z-index: 3;
  width: 220px;
  height: 220px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 72, 0, 0.28) 0%,
    rgba(255, 184, 0, 0.18) 30%,
    rgba(0, 200, 140, 0.08) 55%,
    transparent 75%);
  filter: blur(8px);
  animation: hero-heat-fade 1.1s ease-out forwards;
}

@keyframes hero-heat-fade {
  from { opacity: 1; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.15); }
}


/* ==========================================================================
   SECTION: Trio (3-column copy grid, e.g. Diagnose/Know/Move)
   ========================================================================== */
.trio {
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
}

.trio__col {
  flex: 1;
  min-width: 0;
  padding: 0 32px;
  text-align: center;
  border-left: 1px solid var(--color-border);
}

.trio__col:first-child {
  border-left: none;
}

.trio__col h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

.trio__col p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-500);
}

/* ==========================================================================
   SECTION: Stages
   ========================================================================== */
.stages {
  background: var(--color-core-neutral-50);
  padding: 52px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stages__heading {
  max-width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.stages__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  background: linear-gradient(157deg, var(--color-core-950) 0%, #8e238b 53%, #c04363 74%, #e55728 89%, var(--color-accent-default) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heading-drift 14s ease-in-out infinite alternate;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}

@keyframes heading-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes heading-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__heading,
  .stages__title { animation: none; }
}

.stages__subhead {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

/* Sticky while its containing .stage-sections wrapper (tab bar + the 4
   stage sections) is in view; scrolls away normally once you pass Act. */
.stages__tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: var(--color-core-neutral-50);
}

.stages__tabs-inner {
  display: flex;
  border-bottom: 1px solid var(--color-core-neutral-200);
}

.stages__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.stages__tab:hover {
  color: var(--color-core-700);
}

.stages__tab:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: -4px;
}

.stages__tab--active {
  background: var(--color-core-neutral-100);
  color: var(--color-core-700);
  border-bottom: 1px solid var(--color-core-700);
}

.stage-sections__spacer {
  height: 52px;
  background: var(--color-core-neutral-50);
}

/* Anchor targets for the tab bar — offsets the jump so the section
   heading lands clear of the sticky bar instead of tucked under it. */
.observe {
  scroll-margin-top: var(--stage-tab-offset, 64px);
}

/* Stage colors, the same as the dots in the navbar's Platform menu */
.stages__tab[data-stage-tab="section-observe"]    { --stage-color: #0055A8; }
.stages__tab[data-stage-tab="section-analyze"]    { --stage-color: #007EA8; }
.stages__tab[data-stage-tab="section-understand"] { --stage-color: #C49000; }
.stages__tab[data-stage-tab="section-act"]        { --stage-color: #D44A1A; }

.icon-rings {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--stage-color, var(--color-core-neutral-500));
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.icon-rings--active {
  background: var(--stage-color, var(--color-core-700));
  border-color: var(--stage-color, var(--color-core-700));
}

/* ==========================================================================
   SECTION: Observe (heading + accordion + mockup)
   ========================================================================== */
.observe {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 52px 20px;
}

.observe__title {
  margin: 0 0 76px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.12px;
  color: var(--color-core-neutral-800);
  text-align: center;
}

.observe__title strong {
  font-weight: 700;
}

.observe__row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.observe__mockup {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* One image per accordion item — only the one matching the currently
   open item shows, kept in sync by JS. */
.observe__mockup-img {
  display: none;
}

.observe__mockup-img--active {
  display: block;
}

.observe__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   SECTION: Proof stats
   ========================================================================== */

.proof-stats {
  padding: 40px 20px;
}

.proof-stats__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  border-top: 1px solid var(--color-core-neutral-100);
  border-bottom: 1px solid var(--color-core-neutral-100);
}

.proof-stats__item {
  flex: 1;
  min-width: 0;
  padding: 36px 28px;
  border-left: 1px solid var(--color-core-neutral-100);
}

.proof-stats__item:last-child {
  border-right: 1px solid var(--color-core-neutral-100);
}

.proof-stats__value {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--color-core-neutral-800);
}

/* One icon set, all in the primary color; arrows rotate from one drawing */
.proof-stats__arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.7em;
  height: 0.7em;
  margin-top: -0.04em;
  color: var(--color-primary);
}

.proof-stats__arrow svg { width: 100%; height: 100%; }
.proof-stats__arrow--right svg { transform: rotate(90deg); }
.proof-stats__arrow--down svg { transform: rotate(180deg); }
.proof-stats__arrow--left svg { transform: rotate(-90deg); }

.proof-stats__label {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: var(--color-core-neutral-800);
}

.proof-stats__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-core-neutral-600);
}

.proof-stats__text a {
  color: var(--color-primary);
  text-decoration: none;
}

.proof-stats__text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ==========================================================================
   SECTION: Trusted by Industry Leaders
   Heading stays in the page column; the card row runs full width, starts
   aligned with the page's content edge, and scrolls sideways (swipe,
   trackpad, or click-and-drag via script.hp26.js).
   ========================================================================== */

.leaders {
  margin: 0 auto;
  padding: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.leaders__title {
  max-width: var(--container-width);
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.12px;
  color: var(--color-core-neutral-800);
  text-align: center;
}

/* ".leaders ." prefix: outranks the older tablet rules in styles.mobile.hp26.css,
   which would otherwise wrap the cards into a grid */
.leaders .leaders__row {
  --leaders-edge: max(20px, calc((100% - var(--container-width)) / 2 + 20px));
  display: flex;
  gap: 16px;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--leaders-edge);
  scroll-padding: 0 var(--leaders-edge);
  box-sizing: border-box;
  scrollbar-width: none;
  cursor: grab;
}
.leaders .leaders__row::-webkit-scrollbar { display: none; }

/* While dragging with the mouse: no snapping mid-drag, no text selection */
.leaders .leaders__row.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.leaders .leaders__card {
  position: relative;
  flex: 0 0 328px;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
}
.leaders .leaders__card img { -webkit-user-drag: none; }

.leaders__img {
  aspect-ratio: 328/218;
  border-radius: 16px;
}

.leaders__img--photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.leaders__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-core-neutral-600);
}

img.leaders__logo {
  max-width: 60%;
  max-height: 40%;
  width: auto;
  height: auto;
  pointer-events: none;
}

@media (max-width: 480px) {
  .leaders .leaders__card { flex-basis: 260px; }
}


/* ==========================================================================
   SECTION: Built for the way you actually work
   ========================================================================== */
.workflow {
  background: var(--color-core-neutral-50);
  padding: 52px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workflow__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  text-align: center;
  background: linear-gradient(139deg, var(--color-core-950) 12%, #8e238b 43%, #c04363 55%, #e55728 63%, var(--color-accent-default) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.workflow__tabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.workflow__tab {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px dashed var(--color-core-neutral-300);
  background: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-500);
}

.workflow__tab--active {
  border: 1px solid var(--color-core-300);
  background: var(--color-core-50);
  color: var(--color-core-700);
}

.workflow__tab {
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.workflow__tab--dashed:hover {
  color: var(--color-core-700);
  border-color: var(--color-core-neutral-400);
}

.workflow__tab:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: 2px;
}

.workflow__mockup {
  position: relative;
  max-width: var(--container-width);
  width: 100%;
  margin-top: 40px;
}

/* One team-group per tab; only the active team's group of 3 shows. */
.workflow__mockup-team {
  display: none;
}

.workflow__mockup-team--active {
  display: block;
}

/* Within a team-group, stacked placeholder states — only the active one
   is shown. The on-image counter is a preview aid so it's obvious which
   of the 3 is live; drop it (and the other 2 states) once real images
   replace these. */
.workflow__mockup-img {
  display: none;
  position: relative;
}

.workflow__mockup-img--active {
  display: block;
}

.workflow__mockup-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--color-core-neutral-300);
}

/* One team-group per tab; only the active team's 3 cards show. */
.workflow__cards-team {
  display: none;
  width: 100%;
}

.workflow__cards-team--active {
  display: block;
}

.workflow__cards {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  /* Sits flush against .workflow__mockup above — no gap between them. */
  margin-top: 0;
}

.workflow__card {
  flex: 1;
  padding: 32px 24px;
  border-top: 2px solid var(--color-core-neutral-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.workflow__card:hover {
  background: var(--color-core-neutral-100);
}

.workflow__card:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: -2px;
}

.workflow__card--active {
  border-top: 2px solid var(--color-core-700);
}

.workflow__card-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.672px;
  color: var(--color-core-700);
}

.workflow__card p {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-600);
}

.workflow__card a {
  color: var(--color-core-700);
  font-weight: 600;
}

.icon-arrow-right {
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 5h8M5 1l4 4-4 4" stroke="black" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 5h8M5 1l4 4-4 4" stroke="black" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* ==========================================================================
   SECTION: Reviews ("Backed by Thousands")
   Two marquee rows scrolling in opposite directions. script.hp26.js repeats
   the cards so each row always covers the screen.
   ========================================================================== */

.reviews {
  width: 100%;
  padding: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* between the two rows of cards */
}

.reviews .leaders__title {
  padding: 0 20px;
  margin-bottom: 24px;                /* extra space under the headline (40px total) */
}

.reviews__track {
  width: 100%;
  overflow: hidden;
}

/* Card spacing is a margin on every card instead of a flex gap, so the two
   halves of each row are exactly equal and the loop point is invisible */
.reviews__marquee {
  display: flex;
  gap: 0;
  width: max-content;
  animation: reviews-scroll 70s linear infinite;
}

.reviews__marquee > .review-card {
  margin-right: 16px;
}

.reviews__track:hover .reviews__marquee {
  animation-play-state: paused;
}

.reviews__track--reverse .reviews__marquee {
  animation-direction: reverse;
}

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__marquee {
    animation: none;
  }
}

.review-card {
  background: var(--color-core-neutral-50);
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  width: 440px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.review-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
}

img.review-card__avatar {
  object-fit: cover;
}

/* Review site logo in the avatar spot: a white circle with the logo centered */
.review-card__source {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-core-neutral-100);
}

/* Logos limited in both directions, so square and wide logos look balanced */
.review-card__source img {
  display: block;
  width: auto;
  height: auto;
  max-width: 46px;
  max-height: 34px;
}

.review-card__stars {
  color: #ffb800;
  font-size: 13px;
  letter-spacing: 2px;
}

.review-card__body h4 {
  margin: 4px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.396px;
  color: var(--color-core-700);
}

.review-card__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.264px;
  color: var(--color-core-neutral-800);
}

.footer__affiliate-title .icon-arrow-right {
  color: var(--color-text-inverse);
}

/* Stage tab bar: slides away once the last stage section has scrolled past
   (toggled by script.hp26.js). Stands in for the dev-package's .stage-sections
   wrapper, which TYPO3 can't render around separate content elements. */

.stages__tabs {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.stages__tabs--past {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.observe__mockup img { width: 100%; height: auto; }

/* Homepage Wrap Fix */

.hero,
.trio,
.stages,
.stages__tabs,
.observe,
.proof-stats,
.leaders,
.workflow,
.reviews { text-wrap: wrap; }

.stages__tabs a.stages__tab,
.stages__tabs a.stages__tab:hover { text-decoration: none; }

   .stages__tabs { top: var(--site-header-offset, 0px); }
   .observe { scroll-margin-top: calc(var(--stage-tab-offset, 64px) + var(--site-header-offset, 0px)); }

/* Stage sections: images get the same wide frame as the hero mockup (1600px).
   Headings and buttons stay centered; the accordion keeps a readable width. */
@media (min-width: 1025px) {
  .observe { max-width: 1600px; }
  .observe .accordion { flex: 0 0 clamp(420px, 36%, 540px); }
  .observe__mockup { flex: 1 1 auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   RESPONSIVE OVERRIDES (HP26 homepage, navbar and footer)

   Rewritten to match the page as built in TYPO3, in English and German:
   the HP26 hero visual, stages nav, stage accordions, stats, draggable
   leaders row, reviews marquee, floating newsletter card and the footer.

   Breakpoints:
     1024px  tablet: multi-column rows ease their padding.
      768px  phones / small tablets: side-by-side rows stack.
      480px  small phones: type and padding come down another notch.
   The navbar switches to its drawer at 900px (defined in styles.hp26.css).

   German copy is noticeably longer, so headings and stat titles hyphenate
   instead of breaking mid-word, and button rows stack earlier.
   ========================================================================== */

/* ==========================================================================
   All widths: long words hyphenate (uses the page language, e.g. lang="de")
   ========================================================================== */
.hero__heading,
.stages__title,
.observe__title,
.proof-stats__label,
.leaders__title {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================================================
   1024px: tablet
   ========================================================================== */
@media (max-width: 1024px) {

  /* --- Trio: ease the side padding before the 768px stack --- */
  .trio__col {
    padding: 0 16px;
  }

  /* --- Proof stats: less side padding, keep the space to the frame lines --- */
  .proof-stats__item {
    padding: 28px 16px;
  }

  /* --- Workflow (section not built yet; kept for when it is) --- */
  .workflow__card {
    padding: 32px 16px;
  }
}

/* ==========================================================================
   768px: phones / small tablets
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Hero ---
     Everything centered (the old theme left-aligns headings on phones). */
  .hero .hero__heading,
  .hero .hero__subhead {
    text-align: center;
  }

  .hero__heading {
    font-size: 36px;
    letter-spacing: -1.1px;
  }

  .hero__subhead {
    font-size: 17px;
  }

  /* Ratings wrap onto two lines: no dividers dangling at line ends */
  .hero__ratings {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    row-gap: 12px;
  }

  .hero__ratings .rating__divider {
    display: none;
  }

  /* --- Hero visual ---
     A taller frame for phones: logos in a 3 x 2 grid at a readable size,
     and the mockup shown larger, with its left part in view (the frame
     crops the rest). */
  .hero__visual {
    aspect-ratio: 4 / 3;
    margin-top: 40px;
    border-radius: 16px 16px 0 0;
  }

  .hero__logos {
    top: 5%;
    left: 6%;
    width: 88%;
    height: 24%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    row-gap: 6%;
  }

  .hero__logos li {
    display: flex;
    justify-content: center;
    flex: 0 0 30%;
  }

  .hero__logo {
    max-height: 6cqw;
    max-width: 22cqw;
  }

  .hero__visual-mockup {
    top: 34%;
    left: 6%;
    width: 150%;
  }

  /* --- Trio: stacked, divider moves to the top --- */
  .trio {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
  }

  .trio__col {
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
  }

  .trio__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* --- Stages heading + sticky tab bar --- */
  .stages__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .stages__subhead {
    font-size: 17px;
  }

  .stages__tab {
    padding: 14px 20px;
    font-size: 16px;
  }

  /* --- Stage sections: image first, accordion below --- */
  .observe__row {
    flex-direction: column;
    gap: 24px;
  }

  .observe__mockup {
    order: -1;
    width: 100%;
  }

  .observe__title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  /* Buttons stack full width (the German labels are too long side by side) */
  .observe__ctas {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
  }

  .observe__ctas .btn {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  /* --- Proof stats: 2 x 2 grid inside the frame lines --- */
  .proof-stats__inner {
    flex-wrap: wrap;
  }

  .proof-stats__item {
    flex: 1 1 50%;
    padding: 24px 16px;
    border-left: none;
  }

  .proof-stats__item:nth-child(even) {
    border-left: 1px solid var(--color-core-neutral-100);
  }

  .proof-stats__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-core-neutral-100);
  }

  .proof-stats__item:last-child {
    border-right: none;
  }

  .proof-stats__label {
    font-size: 16px;
  }

  /* --- Workflow (section not built yet; kept for when it is) --- */
  .workflow__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .workflow__cards {
    flex-direction: column;
  }

  .workflow__card {
    padding: 24px 0;
    border-top: none;
    border-bottom: 2px solid var(--color-core-neutral-100);
  }

  .workflow__card:last-child {
    border-bottom: none;
  }

  .workflow__card--active {
    border-top: none;
    border-bottom: 2px solid var(--color-core-700);
  }

  .workflow__mockup-count {
    font-size: 28px;
  }
}

/* ==========================================================================
   480px: small phones
   ========================================================================== */
@media (max-width: 480px) {

  /* --- Hero --- */
  .hero__heading {
    font-size: 30px;
  }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Stages sticky tab bar: scrolls sideways instead of wrapping --- */
  .stages__tabs-inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stages__tabs-inner::-webkit-scrollbar {
    display: none;
  }

  .stages__tab {
    padding: 14px 16px;
    white-space: nowrap;
  }

  /* --- Stage titles --- */
  .observe__title {
    font-size: 24px;
  }

  /* --- Proof stats: numbers and labels one notch smaller --- */
  .proof-stats__item {
    padding: 20px 12px;
  }

  .proof-stats__label {
    font-size: 15px;
  }

  /* --- Reviews marquee: narrower cards, so the next one peeks in --- */
  .review-card {
    width: 300px;
    padding: 16px 18px;
    gap: 16px;
  }
}