/* The public preview combines the film, pricing, and quote request.
   Reuse the existing brand tokens, light surfaces, and pill buttons. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-sans); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 2px solid var(--state-focus-ring); outline-offset: 4px; }
.skip-link { position: absolute; left: 24px; top: -64px; z-index: 60; padding: 8px 16px; background: var(--color-bg-primary); }
.skip-link:focus { top: 12px; }
/* Give the introduction, film, and pricing their own space as the page scrolls. */
.preview { padding: 88px 32px 112px; }
.preview__inner { max-width: 1120px; margin: 0 auto; }
.preview__intro { margin-bottom: 56px; text-align: center; }
.preview__intro h1 { font-size: clamp(36px, 4vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; }
.preview__intro p { margin-top: 20px; color: var(--color-text-secondary); font-size: 18px; line-height: 1.7; }
.preview__film { margin: 0 auto; }
.preview__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #081138; border-radius: var(--radius-xl); }
.pricing { margin-top: 112px; text-align: center; }
.pricing__block { background: var(--color-bg-secondary); border-radius: 10px; padding: 80px 64px; }
.pricing__block h2 { font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.pricing__description { margin-top: 20px; font-size: 18px; line-height: 1.7; color: var(--color-text-secondary); }
.quote-panel__lead { max-width: 660px; margin: 36px auto 0; font-size: 18px; line-height: 1.8; color: #4A4A4F; }
.quote-panel__cta { display: flex; justify-content: center; margin-top: 40px; }
.pricing__trial { display: flex; justify-content: center; margin-top: 48px; }
/* Match the homepage's 52px CTA geometry with shared brand tokens. */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: var(--radius-full); border: 1.5px solid transparent; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background 150ms ease, border-color 150ms ease; }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-outline { background: transparent; border-color: var(--color-border-default); color: var(--color-text-primary); }
.btn-outline:hover { background: var(--state-hover-overlay); border-color: var(--color-border-strong); }
.preview__error { margin-top: 16px; color: var(--color-text-secondary); text-align: center; font-size: 15px; }
.preview__error[hidden] { display: none; }
.preview__error a { color: var(--color-primary); text-decoration: underline; }
/* Keep the shared footer's fine print readable on this public preview. */
.footer .footer__rtco-text, .footer .footer__bottom p, .footer .footer__bottom-links a { color: #A1A1A6; }
/* Keep generous section spacing when the page is shown in a narrow panel. */
@media (max-width: 640px) {
  .preview { padding: 64px 24px 80px; }
  .preview__intro { margin-bottom: 40px; }
  .preview__intro h1 { margin: 0 auto; }
  .preview__intro p { max-width: 32ch; margin: 20px auto 0; font-size: 16px; }
  .preview__video { border-radius: var(--radius-lg); }
  .pricing { margin-top: 80px; }
  .pricing__block { padding: 52px 28px; }
  .pricing__block h2 { font-size: 30px; }
  .pricing__description, .quote-panel__lead { font-size: 16px; }
  .quote-panel__lead { margin-top: 28px; }
  .quote-panel__cta { margin-top: 32px; }
  .pricing__trial { margin-top: 40px; }
  .quote-panel__cta .btn, .pricing__trial .btn { max-width: 100%; padding: 0 20px; font-size: 15px; }
}
@media (max-width: 380px) {
  .preview { padding-right: 20px; padding-left: 20px; }
  .pricing__block { padding-right: 20px; padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .contact-modal[open] { animation: none; }
}