/* Post-export tweaks for this product (the React bundle is prebuilt, so these are CSS-level). */

/* Analysing screen: the ring's percentage is driven per animation frame, which stutters
   whenever a frame is dropped. flow.js instead writes the offset a few times a second as an
   inline style (which outranks the attribute React keeps setting) and lets the compositor
   interpolate between those points. */

/* Price-choice step is skipped — keep it from flashing before the redirect.
   Only hidden when flow.js is alive, so a JS failure still leaves a usable screen. */
html.mgp-js body .page.trial { visibility: hidden; }

/* Subscription disclaimer: no bold emphasis, quieter than the body copy.
   Kept at 10px/#9a9a9a — small enough to recede, still legible; card-scheme rules
   require these terms to stay clearly readable, so don't shrink it further. */
body .paywall .pay-terms b,
body .paywall .pay-terms strong { font-weight: 400; }
body .paywall .pay-terms {
  color: #9a9a9a;
  font-size: 10px;
  line-height: 1.45;
}
body .paywall .pay-terms a { color: #9a9a9a; }

/* Email screen: domain suggestions under the field (as on the reference funnel). */
body .email-page { position: relative; }
body .mgp-hints {
  list-style: none;
  background: #fbfbff;
  border-radius: 10px;
  margin: 6px 0 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
body .mgp-hint {
  border-bottom: 1px solid #a5a3f3;
  padding: 10px 15px;
  color: #2f2e37;
  font-size: 16px;
  line-height: 25px;
  cursor: pointer;
}
body .mgp-hint:last-child { border-bottom: 0; }
body .mgp-hint:hover, body .mgp-hint:active { background: #f1f0fe; }

/* Paywall CTAs breathe, like the reference. */
@keyframes mgpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
body .paywall .pay-trial-cta,
body .paywall .pay-sticky-cta {
  animation: mgpPulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  body .paywall .pay-trial-cta,
  body .paywall .pay-sticky-cta { animation: none; }
}

/* Analysing ring: the browser runs the sweep as one animation; flow.js only sets the
   class and writes the number. The screen's own label is hidden (it jumps). */
@keyframes mgpRing { from { stroke-dashoffset: 490.0884539600077; } to { stroke-dashoffset: 0; } }
body .scan-ring.mgp-ring .scan-ring-fill {
  transition: none;
  animation: mgpRing 9s linear forwards;
}
body .scan-ring.mgp-ring .scan-pct { display: none; }
body .scan-ring .mgp-pct {
  color: var(--ink);
  font-size: 38px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}