/* ============================================================
   Product Page Redesign — product-redesign.css
   Brand: Montserrat, #1E3C4D headings, #2a8a7a primary CTA
   ============================================================ */

/* ---------- base / resets ---------- */
.pr-page *,
.pr-page *::before,
.pr-page *::after { box-sizing: border-box; }

.pr-page {
  font-family: "Montserrat", sans-serif;
  color: #334155;
  line-height: 1.6;
}

.pr-page section {
  display: block;
  visibility: visible;
  opacity: 1;
  position: relative;
  scroll-margin-top: 70px;
}

.pr-page img { max-width: 100%; height: auto; display: block; }

.pr-page p,
.pr-page h1,
.pr-page h2,
.pr-page h3,
.pr-page h4,
.pr-page ul,
.pr-page li,
.pr-page div {
  margin: 0;
  padding: 0;
}

.pr-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.elementor-5293 .pr-page .pr-container,
.elementor-5293 .pr-page section {
  max-width: none;
}
.elementor-5293 .pr-page .pr-container {
  max-width: 1140px;
}

/* ---------- typography ---------- */
.pr-page h1,
.pr-page h2,
.pr-page h3,
.pr-page h4 {
  font-family: "Montserrat", sans-serif;
  color: #1E3C4D;
  line-height: 1.25;
  font-weight: 700;
}

.pr-page h1 { font-size: clamp(28px, 4vw, 44px); }
.pr-page h2,
.elementor-5293 .pr-page h2 { font-size: clamp(24px, 2.2vw, 32px); }
.pr-page h3 { font-size: clamp(18px, 2vw, 22px); }

.pr-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8b3a4a;
  margin-bottom: 12px;
}

/* ---------- buttons ---------- */
.product-btn-primary {
  display: inline-block;
  background: #2a8a7a;
  color: #fff !important;
  border: none;
  border-radius: 25px;
  padding: 5px 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 35px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.product-btn-primary:hover { background: #1F3C4E; }
.product-btn-primary:focus-visible {
  outline: 2px solid #1E3C4D; outline-offset: 3px;
}

.product-btn-secondary {
  display: inline-block;
  background: transparent;
  color: #1E3C4D !important;
  border: 1px solid #1E3C4D;
  border-radius: 25px;
  padding: 5px 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 35px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.product-btn-secondary:hover { background: rgba(30,60,77,0.06); }
.product-btn-secondary:focus-visible {
  outline: 2px solid #2a8a7a; outline-offset: 3px;
}

.pr-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.pr-friction {
  font-size: 13px;
  color: #556575;
  margin-top: 10px;
}

/* ---------- scroll reveal ---------- */
.elementor-5293 .pr-page [data-reveal] {
  opacity: 0 !important;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.elementor-5293 .pr-page [data-reveal].is-visible {
  opacity: 1 !important;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .elementor-5293 .pr-page [data-reveal] {
    opacity: 1 !important;
    transform: none;
    transition: none;
  }
}

/* fallback: if JS hasn't run after 3s, show everything */
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}
.elementor-5293 .pr-page [data-reveal]:not(.is-visible) {
  animation: revealFallback 0s 3s forwards;
}

/* ============================================================
   1. HERO
   ============================================================ */
.elementor-5293 .pr-page .pr-hero {
  background: linear-gradient(180deg, #F5B7C4 18%, #ACA3DC 92%) !important;
  padding: 120px 0 80px;
  overflow: hidden;
  width: 100%;
}
.elementor-5293 .pr-hero__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.elementor-5293 .pr-hero__text {
  text-align: center;
  max-width: 1060px;
}
.elementor-5293 .pr-hero h1 {
  color: #1E3C4D !important;
  margin-bottom: 16px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-wrap: balance;
}
.elementor-5293 .pr-hero__subtitle {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #2d4f5e;
  max-width: 680px;
  margin: 0 auto 28px;
  line-height: 1.65;
  text-wrap: balance;
}
.elementor-5293 .pr-hero .pr-friction {
  color: #3d5f6e;
}

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pr-hero__mock {
  animation: heroSlideUp 0.8s 0.15s ease-out both;
  position: relative !important;
  overflow: hidden !important;
  width: 100%;
  max-width: 960px;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(14,42,54,0.15), 0 0 0 1px rgba(14,42,54,0.06) !important;
}
.pr-hero__mock img {
  width: 100%;
  height: auto;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .pr-hero__mock { animation: none; }
}

@media (max-width: 768px) {
  .elementor-5293 .pr-hero { padding: 80px 0 50px; }
  .elementor-5293 .pr-hero__grid {
    gap: 32px;
    padding: 0 24px;
  }
}

/* ============================================================
   2. SOCIAL PROOF BAR
   ============================================================ */
.elementor-5293 .pr-page .pr-social-proof {
  background: #F5F7FA !important;
  padding: 28px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.elementor-5293 .pr-social-proof__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #7a8a9b;
  margin-bottom: 16px !important;
  padding: 0;
}
.pr-marquee {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.pr-marquee:hover { animation-play-state: paused; }

.pr-marquee__track {
  display: flex;
  gap: 56px;
  align-items: center;
  padding: 0 28px;
  flex-shrink: 0;
}
.pr-marquee__logo {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  object-fit: contain;
  display: inline-block !important;
}
.pr-marquee:hover .pr-marquee__logo {
  opacity: 0.75;
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* gradient masks */
.elementor-5293 .pr-social-proof::before,
.elementor-5293 .pr-social-proof::after {
  content: "" !important;
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.pr-social-proof::before {
  left: 0;
  background: linear-gradient(90deg, #F5F7FA, transparent);
}
.pr-social-proof::after {
  right: 0;
  background: linear-gradient(270deg, #F5F7FA, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .pr-marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .pr-marquee__track { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   3. PAIN POINTS
   ============================================================ */
.elementor-5293 .pr-page .pr-pain {
  padding: 80px 0 88px;
  background: #fff !important;
}
.elementor-5293 .pr-pain .pr-container { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.elementor-5293 .pr-pain__header { text-align: center; margin-bottom: 48px; }
.elementor-5293 .pr-pain__header h2 { margin-bottom: 12px !important; }
.elementor-5293 .pr-pain__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.elementor-5293 .pr-pain__card {
  background: #F5F7FA;
  border-radius: 14px;
  padding: 36px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-5293 .pr-pain__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(30,60,77,0.08);
}
.elementor-5293 .pr-pain__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1E3C4D;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px !important;
}
.elementor-5293 .pr-pain__icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elementor-5293 .pr-pain__card h3 { margin-bottom: 10px !important; color: #1E3C4D !important; }
.elementor-5293 .pr-pain__card p { font-size: 15px; line-height: 1.65; color: #475569; }

@media (max-width: 767px) {
  .elementor-5293 .pr-pain__grid { grid-template-columns: 1fr; }
  .elementor-5293 .pr-pain { padding: 56px 0; }
  .elementor-5293 .pr-pain .pr-container { padding: 0 24px; }
}

/* ============================================================
   4. SCROLL-DRIVEN FEATURES
   ============================================================ */
/* ensure no ancestor clips the sticky element */
.elementor-5293 .pr-page,
.elementor-5293 .pr-features,
.elementor-5293 .pr-features .pr-container,
.elementor-5293 .pr-features__scroll-wrap {
  overflow: visible !important;
}
.elementor-5293 .pr-page .pr-features { background: #F5F7FA !important; padding: 88px 0; }
.elementor-5293 .pr-features .pr-container { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.elementor-5293 .pr-features__header { text-align: center; margin-bottom: 56px; max-width: 600px; margin-left: auto; margin-right: auto; }
.elementor-5293 .pr-features__header h2 { margin-bottom: 12px !important; }

.elementor-5293 .pr-features__scroll-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr;
  /* Column gap only. The text items are grid rows now rather than block
     children of a wrapper, so a row gap would push them 48px apart each. */
  gap: 0 48px;
  align-items: start;
  position: relative;
}

/* Each feature is one card in the markup so the carousel below 900px can pair a
   description with its own animation. Here the card dissolves so its two halves
   land in the grid directly: text down column 1, animations stacked in a sticky
   column 2. */
.elementor-5293 .pr-feature { display: contents; }

.pr-features__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #d0d6dc; border-radius: 2px;
}
.pr-features__rail-fill {
  position: absolute; left: 0; top: 0;
  width: 3px; height: 0; background: #2a8a7a;
  border-radius: 2px; transition: height 0.35s ease;
}

.elementor-5293 .pr-features__item {
  grid-column: 1;
  margin-left: 40px;
  padding: 64px 0 !important; cursor: pointer;
  min-height: 320px;
  transition: opacity 0.3s ease; opacity: 0.5;
  position: relative;
}
.elementor-5293 .pr-features__item.is-active { opacity: 1; }
.elementor-5293 .pr-features__item h3 { margin-bottom: 8px !important; font-size: 20px; color: #1E3C4D !important; }
/* The theme paints buttons white, and that beats `color: inherit` here, so the
   heading colour has to be restated rather than inherited from the h3. The shadow
   and the width are the theme's too: it stretches buttons to the full column
   below 545px, and the pair drew a faint rounded box around every feature heading
   on a phone that looked tappable and was not. */
.elementor-5293 .pr-features__item-btn {
  background: none !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; width: auto !important;
  margin: 0; font: inherit; color: #1E3C4D !important; text-align: left; cursor: pointer;
}
.elementor-5293 .pr-features__item-btn:focus-visible {
  outline: 2px solid #2a8a7a; outline-offset: 4px; border-radius: 3px;
}
.elementor-5293 .pr-features__item p { font-size: 15px; margin-bottom: 14px !important; line-height: 1.65; color: #475569; }

.elementor-5293 .pr-features__bullets { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.elementor-5293 .pr-features__bullets li {
  position: relative; padding-left: 22px !important;
  font-size: 14px; margin-bottom: 6px !important; color: #475569;
  list-style: none !important;
}
.elementor-5293 .pr-features__bullets li::before {
  content: "" !important; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: #2a8a7a;
}

/* All four animations occupy the same column-2 area and overlap, so only the
   active one is visible. The area spans every row, which is what gives sticky
   something to travel through — a sticky grid item can only move inside its own
   grid area, so pinning it to row 1 would unpin it immediately. */
.elementor-5293 .pr-features__screen {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  position: -webkit-sticky;
  position: sticky;
  /* Centre the panel in the space below the fixed header rather than parking it
     just underneath it. Half the panel height at this width is 232px (522 wide
     / 1.125) less half the 70px header, so 197px. max() keeps it clear of the
     header on short windows. */
  top: max(104px, calc(50vh - 197px));
  width: 100%;
  aspect-ratio: 720 / 640;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(30,60,77,0.10);
  background: #f0f2f5;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.elementor-5293 .pr-features__screen.is-active { opacity: 1; }
.elementor-5293 .pr-features__screen img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* !important is load-bearing: assets/css/en-inline.css carries a site-wide
   `iframe { height: 650px !important }` (800px under 600px) from the legacy WP
   custom CSS. Without overriding it the iframe is taller than its panel and the
   bottom of every animation is silently cropped — 186px on desktop, 269px on a
   phone. The animation must be exactly its panel, so its internal viewport
   matches what the reader can see. */
.pr-features__anim {
  width: 100% !important;
  height: 100% !important;
  border: none; border-radius: 12px;
  display: block; pointer-events: none;
}

.pr-features__dot {
  position: absolute; left: -47px; top: 38px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #c8cfd5; border: 3px solid #F5F7FA;
  transition: background 0.3s ease, transform 0.3s ease; z-index: 2;
}
.elementor-5293 .pr-features__item.is-active .pr-features__dot {
  background: #2a8a7a; transform: scale(1.3);
}

.elementor-5293 .pr-features__cta {
  text-align: center;
  padding-top: 48px;
}
.elementor-5293 .pr-features__cta .pr-cta-group { justify-content: center; }
.elementor-5293 .pr-features__cta .pr-friction { text-align: center; }

/* -- Feature carousel (below 900px) -----------------------------------------
   A native horizontal scroller with CSS snap: cards advance on a sideways
   swipe, which is the gesture that matches the motion. Vertical scrolling is
   never touched, so the page never feels stuck and momentum is intact. This
   replaced a pinned section driven by vertical scroll, where one card advance
   was 0.77 of a screen and a single flick crossed two or three cards.

   Each card is a full-height column: heading and description on top, animation
   filling the rest. Because a card is its own element, its text can vary per
   feature to absorb whatever height its animation does not need. */
@media (max-width: 899px) {
  .elementor-5293 .pr-features .pr-container { padding: 0 16px; }

  .elementor-5293 .pr-features.is-carousel .pr-features__scroll-wrap {
    display: flex !important;
    grid-template-columns: none;
    gap: 12px;
    /* !important beats the sticky-safety rule above, which sets
       overflow: visible !important on this element so the desktop panel can
       pin. Without it the track never clips and the whole page scrolls
       sideways instead. */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Cards keep their own height instead of stretching to the tallest, so a
       short animation's panel ends where its content ends. */
    align-items: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .elementor-5293 .pr-features.is-carousel .pr-features__scroll-wrap::-webkit-scrollbar {
    display: none;
  }
  .elementor-5293 .pr-features.is-carousel .pr-features__rail { display: none; }

  /* Full width, no peeking sliver of the next card. A peek narrows the card,
     and these animations get taller as they get narrower: at 358px TalkCoach
     needs 683px of height and fits, at 319px it needs 750px and does not. The
     progress bar carries the "there are more" signal instead. */
  .elementor-5293 .pr-features.is-carousel .pr-feature {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    scroll-snap-align: center;
    /* Height comes from the content, not the viewport. The four animations need
       very different amounts of room (458px to 704px at phone width), so a
       shared full-screen card left the shorter ones with a stretched, empty
       panel. JS sizes each panel to what its animation actually draws; the
       carousel is then as tall as its tallest card. */
    height: auto;
  }

  .elementor-5293 .pr-features.is-carousel .pr-features__item {
    grid-column: auto;
    margin-left: 0;
    padding: 4px 4px 12px !important;
    min-height: 0;
    opacity: 1;
    cursor: default;
    flex: 0 0 auto;
  }
  .elementor-5293 .pr-features.is-carousel .pr-features__item-btn { cursor: default; }
  .elementor-5293 .pr-features.is-carousel .pr-features__dot { display: none; }
  .elementor-5293 .pr-features.is-carousel .pr-features__item h3 {
    margin-bottom: 6px !important;
  }
  .elementor-5293 .pr-features.is-carousel .pr-features__item p {
    margin-bottom: 8px !important;
  }

  /* Fixed heights, taken from measuring what each animation draws at its
     narrowest phone panel, plus a small buffer. Deliberately NOT derived from
     the viewport: a mobile address bar collapsing changes the viewport height,
     and anything keyed to it made the panels resize and the text jump
     mid-scroll. Width is stable while scrolling; height is not. */
  .elementor-5293 .pr-features.is-carousel .pr-features__screen {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    top: auto;
    align-self: stretch;
    aspect-ratio: auto;
    flex: 0 0 auto;
    min-height: 0;
    opacity: 1;
  }
  /* measured need at a 343px panel: 458 / 416 / 526 / 442 */
  .elementor-5293 .pr-features.is-carousel [data-screen="0"] { height: 470px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="1"] { height: 428px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="2"] { height: 535px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="3"] { height: 454px; }

  /* One segment per card, each filling as its own card is the one on screen. A row
     of dots on a shared rail cannot be made to agree with the cards: four dots make
     three gaps while four cards make four steps, so whichever scale the fill used,
     it arrived a twelfth of the section away from every card change. Segments have
     no shared scale to disagree with, so a segment completes exactly as the next
     card lands, and the count of them still says how many cards there are.
     width, not max-width: this element is a flex item inside the pinned stage,
     where auto side margins consume the free space rather than centring a
     stretched box, and max-width alone left it 0px wide and invisible on every
     phone. The tablet, whose parent is a plain block, was unaffected. */
  .elementor-5293 .pr-features__progress {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 4px;
    margin: 14px auto 0;
    width: min(220px, 100%);
    background: none;
    overflow: visible;
  }
  .elementor-5293 .pr-features__progress span {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #d0d6dc;
    overflow: hidden;
  }
  .elementor-5293 .pr-features__progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: #2a8a7a;
    /* --span is how many moves the layout makes and --shift where it starts: the pin
       gives every card its own stretch of scroll, so the first segment fills as you
       read card one, while the carousel already has card one on screen at a swipe of
       zero, so its first segment starts full. */
    transform: scaleX(clamp(0,
      calc(var(--deck, 0) * var(--span, 4) - var(--k, 0) + var(--shift, 0)), 1));
    transform-origin: left center;
  }
  .elementor-5293 .pr-features__progress span:nth-child(1) { --k: 0; }
  .elementor-5293 .pr-features__progress span:nth-child(2) { --k: 1; }
  .elementor-5293 .pr-features__progress span:nth-child(3) { --k: 2; }
  .elementor-5293 .pr-features__progress span:nth-child(4) { --k: 3; }

  /* Vertical stack: read straight down the page, one panel per feature at its own
     measured height. This is what a browser without JS gets, and what a viewport
     too short for the pinned deck gets — under 640px tall, which page zoom and a
     large default font size reach on any phone. */
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__scroll-wrap {
    display: block !important;
  }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__rail { display: none; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__dot { display: none; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__progress { display: none; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__item {
    grid-column: auto; margin-left: 0; padding: 8px 0 12px !important;
    min-height: 0; opacity: 1; cursor: default;
  }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__item-btn { cursor: default; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) .pr-features__screen {
    grid-column: auto; grid-row: auto; position: relative; top: auto;
    opacity: 1; aspect-ratio: auto; border-radius: 12px; overflow: hidden;
    background: #f0f2f5; box-shadow: 0 12px 40px rgba(30,60,77,0.10); margin-bottom: 44px;
  }
  /* Measured at a 358px-wide panel, which is what a 390px phone gives. */
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="0"] { height: 470px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="1"] { height: 428px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="2"] { height: 470px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="3"] { height: 454px; }
}

/* Narrower than that and every line inside the demos wraps one step earlier, so
   the same content needs more height, not less: measured at a 288px panel, which
   is what a 320px screen gives. */
@media (max-width: 359px) {
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="0"] { height: 490px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="1"] { height: 440px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="2"] { height: 560px; }
  .elementor-5293 .pr-features:not(.is-carousel):not(.is-pinned) [data-screen="3"] { height: 500px; }
}

/* TalkCoach's chat is the tallest animation at every carousel width, so its card
   alone also gives up the paragraph. */
@media (max-width: 899px) {
  .elementor-5293 .pr-features.is-carousel [data-card="2"] .pr-features__item p,
  .elementor-5293 .pr-features.is-carousel [data-card="2"] .pr-features__bullets {
    display: none;
  }
  .elementor-5293 .pr-features.is-carousel [data-card="2"] .pr-features__item {
    padding-bottom: 4px !important;
  }
  .elementor-5293 .pr-features.is-carousel [data-card="2"] .pr-features__item h3 {
    margin-bottom: 0 !important;
  }
}

/* From 600px the panel is wider, so the animations need less height — and their
   own phone layout (max-width 420px) no longer applies, so this range needs its
   own measured values. */
@media (min-width: 600px) and (max-width: 899px) {
  .elementor-5293 .pr-features.is-carousel [data-screen="0"] { height: 450px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="1"] { height: 415px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="2"] { height: 650px; }
  .elementor-5293 .pr-features.is-carousel [data-screen="3"] { height: 455px; }
}

/* Short viewports cannot hold any description alongside a whole animation:
   591px of card minus a ~514px animation leaves 77px, which is the heading. */
@media (max-width: 899px) and (max-height: 740px) {
  .elementor-5293 .pr-features.is-carousel .pr-features__item p,
  .elementor-5293 .pr-features.is-carousel .pr-features__bullets {
    display: none;
  }
}

/* TalkCoach gets a taller desktop panel than its three siblings. Its conversation
   needs 600px at this width to show all five parts of the answer; the others fit
   464px with room to spare, so growing the shared panel would have left them
   ~140px of dead space. All four overlap in the same grid area and only one is
   visible at a time, so they can differ. top is recomputed for the new height so
   it stays centred below the header: 50vh - height/2 + header/2. */
@media (min-width: 900px) {
  .elementor-5293 .pr-features__screen[data-screen="2"] {
    aspect-ratio: auto;
    height: 600px;
    top: max(104px, calc(50vh - 265px));
  }
}

/* The progress bar belongs to the carousel only. */
@media (min-width: 900px) {
  .elementor-5293 .pr-features__progress { display: none; }
}

/* ── Pinned scroll-driven layout (phones, < 600px) ─────────────────────────────
   Vertical scroll pins the stage and cycles through the features one at a time,
   each card sliding in from the right and out to the left. JS adds .is-pinned
   and gives the pin its height. The section header stays outside the stage and
   scrolls away before the deck pins, because at these widths the animations need
   every pixel of the stage: it is what the panel height is left over from. */
@media (max-width: 599px) {
  .elementor-5293 .pr-features.is-pinned .pr-container {
    padding: 16px 16px 0;
  }

  .elementor-5293 .pr-features.is-pinned .pr-features__header {
    margin-bottom: 12px;
  }

  /* svh, not vh: vh is the toolbar-hidden height on iOS Safari, so a stage sized
     in vh runs under the toolbar whenever it is showing, taking the progress bar
     and the bottom of the demo with it. */
  .elementor-5293 .pr-features.is-pinned .pr-features__stage {
    position: sticky;
    top: 70px;
    height: calc(100svh - 70px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .elementor-5293 .pr-features.is-pinned .pr-features__scroll-wrap {
    flex: 1;
    position: relative;
    display: block !important;
    overflow: hidden !important;
    min-height: 0;
  }

  .elementor-5293 .pr-features.is-pinned .pr-feature {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .elementor-5293 .pr-features.is-pinned .pr-feature.is-current,
  .elementor-5293 .pr-features.is-pinned .pr-feature[data-card="0"]:not(.is-past) {
    transform: translateX(0);
  }
  .elementor-5293 .pr-features.is-pinned .pr-feature.is-past {
    transform: translateX(-100%);
  }

  .elementor-5293 .pr-features.is-pinned .pr-features__item {
    flex-shrink: 0;
    grid-column: auto;
    margin-left: 0;
    padding: 0 0 8px !important;
    min-height: auto;
    opacity: 1;
    cursor: default;
  }
  .elementor-5293 .pr-features.is-pinned .pr-features__item-btn { cursor: default; }
  .elementor-5293 .pr-features.is-pinned .pr-features__item h3 {
    margin-bottom: 4px !important;
    font-size: 18px;
  }
  .elementor-5293 .pr-features.is-pinned .pr-features__item p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px !important;
    color: #475569;
  }
  .elementor-5293 .pr-features.is-pinned .pr-features__bullets {
    display: none;
  }

  .elementor-5293 .pr-features.is-pinned .pr-features__screen {
    position: relative !important;
    top: auto !important;
    grid-column: auto;
    grid-row: auto;
    opacity: 1;
    flex: 1;
    height: auto !important;
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f2f5;
    box-shadow: 0 8px 28px rgba(30,60,77,0.10);
  }

  .elementor-5293 .pr-features.is-pinned .pr-features__rail,
  .elementor-5293 .pr-features.is-pinned .pr-features__dot {
    display: none !important;
  }

  /* flex, not block: the rail lays its dots out with justify-content, and blocking
     it here left them as inline boxes 6px apart in the corner. */
  .elementor-5293 .pr-features.is-pinned .pr-features__progress {
    display: flex;
    flex-shrink: 0;
    margin: 10px auto;
  }

  /* Sits after the pin rather than inside the stage, so it is reached once the
     deck has released instead of costing the demos 60px of height. */
  .elementor-5293 .pr-features.is-pinned .pr-features__cta {
    padding: 28px 0 4px;
  }
}

/* Short phones cannot fit the description and a demo the animations can be read
   in. Measured: the shortest common viewport is 667px tall, which leaves the
   panel 424px with the description and 483px without, against the 460px the
   tallest demo needs. The heading carries the point on its own. */
@media (max-width: 599px) and (max-height: 719px) {
  .elementor-5293 .pr-features.is-pinned .pr-features__item p { display: none; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .elementor-5293 .pr-features.is-pinned .pr-feature {
    transition: none;
  }
}

/* ============================================================
   6. QUANTIFIED OUTCOMES
   ============================================================ */
.elementor-5293 .pr-page .pr-outcomes { padding: 88px 0; background: #fff !important; }
.elementor-5293 .pr-outcomes .pr-container { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.elementor-5293 .pr-outcomes__header { text-align: center; margin-bottom: 48px; }
.elementor-5293 .pr-outcomes__header h2 { margin-bottom: 12px !important; }
.elementor-5293 .pr-outcomes__grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.elementor-5293 .pr-outcomes__card {
  background: #F5F7FA; border-radius: 14px; padding: 40px 28px; text-align: center;
}
.elementor-5293 .pr-outcomes__number {
  font-size: clamp(36px, 5vw, 52px) !important; font-weight: 800;
  color: #2a8a7a !important; line-height: 1.1; margin-bottom: 4px !important;
  font-family: "Montserrat", sans-serif;
}
.elementor-5293 .pr-outcomes__card:nth-child(1) { background: #edfaf5; }
.elementor-5293 .pr-outcomes__card:nth-child(1) .pr-outcomes__number { color: #047b54 !important; }
.elementor-5293 .pr-outcomes__card:nth-child(2) { background: #fef3e6; }
.elementor-5293 .pr-outcomes__card:nth-child(2) .pr-outcomes__number { color: #c25c00 !important; }
.elementor-5293 .pr-outcomes__card:nth-child(3) { background: #ebf4fd; }
.elementor-5293 .pr-outcomes__card:nth-child(3) .pr-outcomes__number { color: #1a65b0 !important; }
.elementor-5293 .pr-outcomes__label { font-size: 15px; font-weight: 600; color: #1E3C4D; margin-bottom: 8px !important; }
.elementor-5293 .pr-outcomes__source { font-size: 13px; color: #7a8a9b; font-style: italic; }

@media (max-width: 767px) {
  .elementor-5293 .pr-outcomes__grid { grid-template-columns: 1fr; }
  .elementor-5293 .pr-outcomes { padding: 56px 0; }
  .elementor-5293 .pr-outcomes .pr-container { padding: 0 24px; }
}

/* ============================================================
   7. HOW IT WORKS
   ============================================================ */
.elementor-5293 .pr-page .pr-how { padding: 88px 0; background: #F5F7FA !important; }
.elementor-5293 .pr-how .pr-container { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.elementor-5293 .pr-how__header { text-align: center; margin-bottom: 56px; }
.elementor-5293 .pr-how__header h2 { margin-bottom: 12px !important; }
.elementor-5293 .pr-how__steps {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative;
}
.elementor-5293 .pr-how__steps::before {
  content: "" !important; position: absolute; top: 23px;
  left: calc(12.5% + 24px); right: calc(12.5% + 24px);
  height: 3px; background: #c0cad2; z-index: 0;
}
.elementor-5293 .pr-how__step { text-align: center; position: relative; z-index: 1; }
.elementor-5293 .pr-how__dot-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: #d0d6dc; margin: 0 auto 20px !important;
  display: flex !important; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; color: #7a8a9b;
  transition: background 0.5s ease, color 0.5s ease;
  position: relative; z-index: 1;
}
.elementor-5293 .pr-how__step.is-filled .pr-how__dot-wrap { background: #2a8a7a; color: #fff; }
.elementor-5293 .pr-how__step h3 { font-size: 17px; margin-bottom: 8px !important; color: #1E3C4D !important; }
.elementor-5293 .pr-how__step p { font-size: 14px; line-height: 1.6; color: #556575; }

@media (max-width: 767px) {
  .elementor-5293 .pr-how__steps { grid-template-columns: 1fr; gap: 40px; }
  .elementor-5293 .pr-how__steps::before { display: none; }
  .elementor-5293 .pr-how { padding: 56px 0; }
  .elementor-5293 .pr-how .pr-container { padding: 0 24px; }
}

/* ============================================================
   8. TESTIMONIALS
   ============================================================ */
.elementor-5293 .pr-page .pr-testimonials { padding: 88px 0; background: #fff !important; }
.elementor-5293 .pr-testimonials .pr-container { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.elementor-5293 .pr-testimonials__header { text-align: center; margin-bottom: 48px; }
.elementor-5293 .pr-testimonials__header h2 { margin-bottom: 12px !important; }
.elementor-5293 .pr-testimonials__grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.elementor-5293 .pr-testimonial__card {
  background: #F5F7FA; border-radius: 14px; padding: 36px 28px;
  display: flex !important; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-5293 .pr-testimonial__card:hover {
  transform: translateY(-3px); box-shadow: 0 8px 28px rgba(30,60,77,0.08);
}
.elementor-5293 .pr-testimonial__stars { color: #DE899D; font-size: 18px; margin-bottom: 16px !important; letter-spacing: 2px; }
.elementor-5293 .pr-testimonial__quote {
  font-size: 15px; line-height: 1.7; flex: 1;
  margin-bottom: 20px !important; font-style: italic; color: #3d4f5c;
}
.elementor-5293 .pr-testimonial__author { font-size: 14px; font-weight: 600; color: #1E3C4D; }
.elementor-5293 .pr-testimonial__role { font-size: 13px; color: #7a8a9b; }

@media (max-width: 767px) {
  .elementor-5293 .pr-testimonials__grid { grid-template-columns: 1fr; }
  .elementor-5293 .pr-testimonials { padding: 56px 0; }
  .elementor-5293 .pr-testimonials .pr-container { padding: 0 24px; }
}

/* ============================================================
   9. BOTTOM CTA
   ============================================================ */
.elementor-5293 .pr-page .pr-bottom-cta {
  background: #1E3C4D !important; padding: 80px 0;
  text-align: center !important; position: relative; overflow: hidden;
}
.elementor-5293 .pr-bottom-cta .pr-container {
  max-width: 1140px; margin: 0 auto; padding: 0 48px; text-align: center;
}
.elementor-5293 .pr-bottom-cta h2 {
  color: #fff !important; margin-bottom: 16px !important;
  position: relative; z-index: 1; text-align: center;
}
.elementor-5293 .pr-bottom-cta__sub {
  color: rgba(255,255,255,0.85) !important; font-size: clamp(15px, 1.6vw, 18px);
  max-width: 580px; margin: 0 auto 32px !important;
  position: relative; z-index: 1; text-align: center;
}
.elementor-5293 .pr-bottom-cta .pr-cta-group { justify-content: center; position: relative; z-index: 1; }
.elementor-5293 .pr-bottom-cta .product-btn-secondary { color: #fff !important; border-color: rgba(255,255,255,0.5); }
.elementor-5293 .pr-bottom-cta .product-btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }
.elementor-5293 .pr-bottom-cta .pr-friction { color: rgba(255,255,255,0.65) !important; position: relative; z-index: 1; text-align: center; }

.elementor-5293 .pr-bottom-cta__image {
  margin-top: 56px; position: relative; z-index: 1;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.elementor-5293 .pr-bottom-cta__image img { border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); }

.pr-glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.pr-glow--1 { width: 400px; height: 400px; background: rgba(42,138,122,0.2); top: -120px; left: -100px; }
.pr-glow--2 { width: 350px; height: 350px; background: rgba(222,137,157,0.15); bottom: -80px; right: -60px; }
.pr-glow--3 { width: 280px; height: 280px; background: rgba(172,163,220,0.15); top: 50%; left: 60%; transform: translate(-50%, -50%); }

@media (max-width: 767px) {
  .elementor-5293 .pr-bottom-cta { padding: 56px 0; }
  .elementor-5293 .pr-bottom-cta .pr-container { padding: 0 24px; }
}

/* ============================================================
   SECTION LABELS (shared)
   ============================================================ */
.elementor-5293 .pr-section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #c4727e; margin-bottom: 10px !important;
}