/* Motion belongs to the marketing page. Native sample UI keeps its own geometry. */
:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html.motion-enhanced [data-reveal] {
  transition:
    opacity 0.65s var(--motion-ease),
    transform 0.85s var(--motion-ease);
}
html.motion-enhanced [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}
html.motion-enhanced [data-reveal].is-visible {
  transition-delay: var(--reveal-delay, 0ms);
}
html.motion-enhanced [data-reveal]:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
html.motion-enhanced[data-motion="paused"] [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
html.motion-enhanced [data-ambient]:not(.is-in-view),
html.motion-enhanced [data-ambient]:not(.is-in-view) *,
html[data-motion="paused"] [data-ambient],
html[data-motion="paused"] [data-ambient] *,
html.tab-is-hidden [data-ambient],
html.tab-is-hidden [data-ambient] * {
  animation-play-state: paused !important;
}

/* A short, readable handoff from the actual sample panel to its sample workspace. */
.scene-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  line-height: 1.4;
}
.scene-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.scene-replay {
  border: 0;
  background: #ffffff61;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 6px 11px;
  color: #4d5065;
  font:
    10px "Open Runde",
    system-ui;
  white-space: nowrap;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 29px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.scene-replay:hover {
  background: #ffffffb3;
  transform: translateY(-1px);
}
.scene-replay span {
  display: inline-block;
  font-size: 13px;
}
.notch-panel:not([hidden]) {
  animation: notch-unfold 0.42s var(--motion-ease) both;
  transform-origin: 50% 0;
}
.sample-note-content.is-pasted {
  animation: note-paste 0.5s var(--motion-ease) both;
}
@keyframes notch-unfold {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-9px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes note-paste {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quiet illustration movement, visible only while its section is on screen. */
.feature-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--motion-ease);
}
.feature-card .card-bottom {
  margin-top: auto;
  padding-top: 14px;
}
.feature-icon {
  flex: none;
}
.clip-stack {
  flex: none;
}
.stack-photo {
  animation: paper-float 7s ease-in-out infinite;
}
.stack-text {
  animation: paper-float 7s -3s ease-in-out infinite;
}
.local-orbit {
  animation: orbit-turn 22s linear infinite;
}
.local-orbit.orbit-two {
  animation-direction: reverse;
  animation-duration: 32s;
}
.local-orbit::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #bba4d0;
  border-radius: 50%;
}
.local-art > svg,
.cloud-art > svg {
  animation: paper-float 6s ease-in-out infinite;
}
@keyframes paper-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}
.detail-card {
  display: flex;
  flex-direction: column;
  min-height: 395px;
}
.detail-card > p {
  margin-bottom: 28px;
}
.capture-sample {
  height: 165px;
  flex: none;
  margin-top: auto;
}
.ocr-example {
  height: 165px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ocr-example > div {
  overflow: hidden;
}
.ocr-example > div::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #8fa47c, transparent);
  box-shadow: 0 0 10px #a4b88c99;
  animation: ocr-scan 5.5s ease-in-out infinite;
}
.ocr-example:not(.is-in-view) > div::after,
html[data-motion="paused"] .ocr-example > div::after,
html.tab-is-hidden .ocr-example > div::after {
  animation-play-state: paused;
}
@keyframes ocr-scan {
  0%,
  15% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 1;
    transform: translateY(85px);
  }
  75%,
  100% {
    opacity: 0;
    transform: translateY(85px);
  }
}
.ocr-example button {
  min-height: 34px;
  transition:
    background 0.2s,
    color 0.2s;
}
.ocr-example button.is-copied {
  background: #dae7ce;
  color: #344b25;
}
.record-illustration {
  margin: 32px 0 22px;
  min-height: 50px;
}
.detail-card > .text-button {
  margin-top: auto;
  min-height: 28px;
}
.plan {
  display: flex;
  flex-direction: column;
}
.plan > .button {
  margin-top: auto;
}

/* Cached Cloud documents crossfade instead of navigating to a blank iframe. */
.cloud-tabs {
  position: relative;
  isolation: isolate;
}
.cloud-tabs.is-enhanced::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 100px;
  transform: translateX(var(--pill-x)) scaleX(var(--pill-scale));
  transform-origin: 0 50%;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 3px 7px #0000000a;
  transition: transform 0.38s var(--motion-ease);
  pointer-events: none;
  z-index: -1;
}
.cloud-tabs.is-enhanced button[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}
.cloud-load-status {
  min-height: 16px;
  margin: -20px 0 12px;
  text-align: center;
  font-size: 11px;
  color: #7c796f;
}
.cloud-preview-stage {
  height: 650px;
  position: relative;
  background: #141519;
  overflow: hidden;
}
.cloud-browser .cloud-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s var(--motion-ease),
    visibility 0s 0.3s;
}
.cloud-browser .cloud-frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  z-index: 1;
}
.cloud-browser .cloud-frame[data-ready="false"] {
  opacity: 0;
}
.frame-enhanced {
  opacity: 0;
  transition: opacity 0.45s var(--motion-ease);
}
.frame-enhanced.is-ready {
  opacity: 1;
}
.phone-frame iframe {
  height: 100%;
}

/* The closing mark is the actual app icon, rather than a made-up app screen. */
.closing-mark {
  width: 88px;
  height: 88px;
  position: relative;
  margin: 0 auto 37px;
  display: grid;
  place-items: center;
  z-index: 3;
}
.closing-mark img {
  border-radius: 21px;
  position: relative;
  box-shadow: 0 12px 24px -12px #47517a99;
}
.icon-halo {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, #b59bde66, transparent 68%);
  animation: halo-breathe 6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
.faq-list summary {
  transition: color 0.2s;
}
.faq-list summary:hover {
  color: #73776a;
}

@media (hover: hover) and (pointer: fine) {
  .feature-card.is-visible:hover {
    transform: translateY(-4px);
  }
  .plan.is-visible:hover {
    transform: translateY(-3px);
  }
}
@media (max-width: 767px) {
  .scene-hint {
    flex-direction: column;
    gap: 7px;
    bottom: 12px;
  }
  .scene-status {
    font-size: 9px;
    max-width: 290px;
  }
  .scene-replay {
    padding: 5px 9px;
    min-height: 26px;
    font-size: 9px;
  }
  .scene-replay span {
    font-size: 11px;
  }
  .cloud-one {
    opacity: 0.45;
  }
  .cloud-three {
    opacity: 0.5;
  }
  .hero-copy > p:not(.hero-note) {
    color: #3d5260;
  }
  .detail-card {
    min-height: 370px;
  }
  .detail-card > p {
    margin-bottom: 27px;
  }
  .capture-sample {
    height: 170px;
  }
  .ocr-example {
    height: 165px;
  }
  .record-illustration {
    width: 100%;
    margin: 30px auto;
  }
  .studio-browser iframe {
    height: 650px;
  }
  .cloud-preview-stage {
    height: 610px;
  }
  .phone-frame iframe {
    height: 100%;
  }
  .closing-mark {
    margin-bottom: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.motion-enhanced [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Reading and direct interaction take precedence over decorative motion. */
html.motion-enhanced [data-reveal]:focus-within {
  transition: none;
}
@media (max-width: 767px) {
  .hero-note {
    font-size: 11px;
    line-height: 1.7;
  }
  .iphone-panel .availability {
    font-size: 11px;
    line-height: 1.6;
  }
  .demo-caption {
    font-size: 11px;
    line-height: 1.75;
  }
  .stat-row dt {
    font-size: 11px;
  }
}
.hero h1 > span {
  animation: none;
}
.hero .hero-word {
  display: inline-block;
  animation: word-arrive 0.85s var(--motion-ease) both;
  animation-delay: var(--word-delay);
}
@keyframes word-arrive {
  from {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
html[data-motion="paused"] .hero-word {
  animation: none;
}
.studio-browser iframe {
  height: 690px;
}
@media (max-width: 767px) {
  .studio-browser iframe {
    height: 650px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-word {
    animation: none;
  }
}
.faq-list details > p {
  font-size: 15px;
}
@media (max-width: 767px) {
  .faq-list details > p {
    font-size: 14px;
  }
  .closing h2 {
    font-size: clamp(28px, 8.4vw, 36px);
  }
}