/* Motion is a small aside. Content and controls never wait for it. */
.little-pause {
  max-width: 1154px;
  margin: 32px auto 0;
  padding: 72px 0;
  border-top: 1px solid #dfe3de;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.little-pause h2 {
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.18;
  margin: 10px 0;
  letter-spacing: -1.1px;
}
.little-pause h2 em {
  font-weight: 400;
}
.little-pause-copy > p:not(.eyebrow) {
  color: #61707c;
  font-size: 14px;
}
.pause-drawing {
  width: 100%;
  max-width: 360px;
  justify-self: center;
  overflow: visible;
}
.pause-spark {
  opacity: 0;
}
.is-playing .pause-body {
  transform-origin: 48px 70px;
  animation: clearer-pause-nod 3.2s ease-in-out both;
}
.is-playing .pause-eyes {
  transform-origin: 48px 40px;
  animation: clearer-pause-blink 3.2s linear both;
}
.is-playing .pause-pebble {
  animation: clearer-pebble 3.2s cubic-bezier(0.22, 0.68, 0.3, 1) both;
}
.is-playing .pause-pebble.two {
  animation-name: clearer-pebble-two;
}
.is-playing .pause-pebble.three {
  animation-name: clearer-pebble-three;
}
.is-playing .pause-spark {
  animation: clearer-spark 3.2s ease-out both;
}
@keyframes clearer-pause-nod {
  0%,
  20%,
  100% {
    transform: rotate(0);
  }
  36% {
    transform: rotate(-7deg) translateY(-3px);
  }
  52%,
  66% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
}
@keyframes clearer-pause-blink {
  0%,
  14%,
  20%,
  70%,
  76%,
  100% {
    transform: scaleY(1);
  }
  17%,
  73% {
    transform: scaleY(0.12);
  }
}
@keyframes clearer-pebble {
  0%,
  10%,
  65%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-12px);
  }
  46% {
    transform: translateY(0);
  }
  54% {
    transform: translateY(-3px);
  }
}
@keyframes clearer-pebble-two {
  0%,
  22%,
  77%,
  100% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-17px);
  }
  58% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(-3px);
  }
}
@keyframes clearer-pebble-three {
  0%,
  34%,
  89%,
  100% {
    transform: translateY(0);
  }
  54% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(0);
  }
  78% {
    transform: translateY(-4px);
  }
}
@keyframes clearer-spark {
  0%,
  48%,
  72%,
  100% {
    opacity: 0;
  }
  56%,
  62% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .product-cta,
  .product-cta > span,
  .feature-card,
  .story-card {
    transition:
      transform 180ms ease-out,
      box-shadow 180ms ease-out;
  }
  .product-cta:active {
    transform: translateY(1px);
  }
  .product-cta:focus-visible > span {
    transform: translateX(3px);
  }
  @media (hover: hover) and (pointer: fine) {
    .product-cta:hover > span {
      transform: translateX(3px);
    }
  }
}
@media (max-width: 600px) {
  .little-pause {
    margin: 12px 20px 0;
    padding: 28px 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pause-drawing {
    max-width: 280px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .little-pause *,
  .product-cta,
  .product-cta > span,
  .story-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Shared interaction rhythm, alongside the small decorative scene. */
@media (prefers-reduced-motion: no-preference) {
  .case-navigation button,
  .stress-switch button,
  [data-teacher],
  .reference-listen,
  .faq-list summary,
  .story-reveal summary,
  .discovery-card {
    transition:
      background-color 160ms ease,
      color 160ms ease,
      border-color 160ms ease,
      box-shadow 180ms ease,
      transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .case-navigation button:active,
  .stress-switch button:active,
  [data-teacher]:active,
  .reference-listen:active {
    transform: scale(0.985);
  }
  .faq-list summary > span,
  .story-reveal summary > span {
    display: inline-block;
    transition: transform 180ms ease;
  }
  .faq-list details[open] summary > span,
  .story-reveal[open] summary > span {
    transform: rotate(45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .case-navigation button,
  .stress-switch button,
  [data-teacher],
  .reference-listen,
  .faq-list summary,
  .story-reveal summary,
  .discovery-card,
  .faq-list summary > span,
  .story-reveal summary > span {
    transition: none !important;
  }
}

/* Two quiet illustrations: a phrase highlight and a lesson-paper shuffle.
   Text remains fixed and readable in every frame. */
.product-cta {
  gap: 10px;
}
.motion-toggle {
  background: transparent;
  color: #234653;
  border: 1px solid #ccd6d8;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
}
.wording-illustration .type-specimen mark {
  background: linear-gradient(#f5d9c8, #f5d9c8) left center / 100% 84% no-repeat;
}
.wording-illustration.is-playing .type-specimen mark {
  animation: clearer-phrase-highlight 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lesson-illustration {
  isolation: isolate;
}
.paper-layer {
  position: absolute;
  inset: 0;
  border: 1px solid #d5dfe0;
  border-radius: 6px;
  background: transparent;
  z-index: -1;
  pointer-events: none;
}
.paper-layer.one {
  transform: translate(5px, 6px) rotate(1deg);
}
.paper-layer.two {
  transform: translate(10px, 12px) rotate(2deg);
  z-index: -2;
}
.lesson-illustration.is-playing .paper-layer.one {
  animation: clearer-paper-one 3.2s ease-in-out both;
}
.lesson-illustration.is-playing .paper-layer.two {
  animation: clearer-paper-two 3.2s ease-in-out both;
}
@keyframes clearer-phrase-highlight {
  0%,
  100% {
    background-size: 100% 84%;
  }
  12% {
    background-size: 0% 84%;
  }
  30%,
  88% {
    background-size: 100% 84%;
  }
}
@keyframes clearer-paper-one {
  0%,
  100% {
    transform: translate(5px, 6px) rotate(1deg);
  }
  30%,
  60% {
    transform: translate(8px, 4px) rotate(2deg);
  }
}
@keyframes clearer-paper-two {
  0%,
  100% {
    transform: translate(10px, 12px) rotate(2deg);
  }
  40%,
  65% {
    transform: translate(14px, 10px) rotate(3deg);
  }
}
html[data-motion='reduced'] *,
html[data-motion='reduced'] *::before,
html[data-motion='reduced'] *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .wording-illustration *,
  .lesson-illustration * {
    animation: none !important;
  }
}
@media (min-width: 601px) {
  .little-pause {
    width: calc(100% - 96px);
  }
}

@media (min-width: 601px) {
  footer {
    max-width: 1154px;
    width: calc(100% - 96px);
    padding-left: 0;
    padding-right: 0;
  }
}