/* Presentation only. Keep the typography inside product demonstrations intact. */
:root {
  --editorial-body: clamp(15px, 1.2vw, 16px);
}

:is(.section-copy, .section-heading, .memory-intro) > h2,
:is(.routes-heading, .examples-heading, .meeting-section-heading, .sg-section-heading, .mc-heading) h2,
:is(.faq, .browser-faq, .meeting-faq, .sg-faq, .mc-faq, .sg-pace) h2,
.outcome-half h2,
:is(.closing, .browser-cta, .meeting-closing, .sg-closing, .mc-closing) h2 {
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1.08;
}

.section-heading h2 em,
.consolidation .section-copy h2 em {
  color: #737373;
}

:is(.browser-hero, .meeting-hero-heading, .sg-hero, .mc-hero, .support-hero) h1 {
  font-weight: 550;
}

.hero-description,
.section-copy > p:not(.eyebrow),
.section-heading > p:not(.eyebrow),
.memory-intro > p:not(.eyebrow),
.browser-hero-copy > p:not(.eyebrow):not(.browser-local),
.meeting-hero-copy > p:nth-child(2),
.sg-hero-copy > p + p,
.mc-hero-copy > p + p,
:is(.routes-heading, .examples-heading, .meeting-section-heading, .sg-section-heading, .mc-heading) > p,
.sg-pace > div:first-child > p:not(.eyebrow),
.faq > div > p:not(.eyebrow),
:is(.meeting-closing, .sg-closing, .mc-closing) > p:not(.eyebrow) {
  font-size: var(--editorial-body);
  line-height: 1.75;
  color: #626262;
  text-wrap: pretty;
}

.hero-description {
  max-width: 410px;
}

:is(.faq, .browser-faq, .meeting-faq, .sg-faq, .mc-faq) details > summary {
  font-size: 15px;
  line-height: 1.55;
}

:is(.faq, .browser-faq, .meeting-faq, .sg-faq, .mc-faq) details > p {
  font-size: 14px;
  line-height: 1.8;
  color: #626262;
}

/* Scroll entrances run at every viewport width, including narrow previews. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-heading,
    .memory-intro,
    .section-copy,
    .routes-heading,
    .examples-heading,
    .meeting-section-heading,
    .sg-section-heading,
    .mc-heading,
    .faq > div:first-child,
    .closing-inner > div:first-child {
      animation: editorial-arrive linear both;
      animation-duration: auto;
      animation-timeline: view();
      animation-range: entry 0% entry 45vh;
    }

    .memory-stage,
    .app-flow,
    .routine-stage,
    .subscription-visual {
      transform-origin: center top;
      animation: visual-arrive linear both;
      animation-duration: auto;
      animation-timeline: view();
      animation-range: entry 0% entry 55vh;
    }
  }
}

@keyframes editorial-arrive {
  from { opacity: .15; transform: translateY(48px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes visual-arrive {
  from { opacity: .3; transform: translateY(64px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .hero-description {
    max-width: 340px;
  }

  :is(.faq, .browser-faq, .meeting-faq, .sg-faq, .mc-faq) details > summary {
    font-size: 14px;
  }
}