/* /comparison-demo on the homepage (CRO) look: hero, demo frame and closing. The demo UI itself is unchanged. */
.cro-demo .cro-demo-hero { display: grid; justify-items: center; gap: 14px; margin-bottom: 40px; padding-top: 32px; }
.cro-demo .cro-demo-title { margin: 0; font-size: clamp(36px, 6vw, 60px); line-height: 1.1; letter-spacing: -.045em; font-weight: 600; color: var(--ink); }
.cro-demo .cro-demo-title .cro-h1-top { position: relative; z-index: 1; color: var(--ink); }
.cro-demo .cro-h1-accent { color: var(--accent); background: #eaefff; padding: 0 .1em .02em; margin-left: -.1em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cro-demo .cro-demo-actions { justify-content: center; margin-top: 6px; }
.cro-demo .cro-demo-authority { display: flex; justify-content: center; margin-top: 4px; }
.cro-demo .cro-demo-frame { overflow: hidden; border-radius: 16px; box-shadow: 8px 8px 0 #f3f5fc; }
.cro-demo .cro-demo-closing { display: grid; justify-items: center; gap: 20px; margin-top: 72px; text-align: center; }
.cro-demo .cro-demo-closing h2 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .cro-demo .cro-demo-note { display: block; border-radius: 16px; line-height: 1.5; padding: 10px 14px; }
  .cro-demo .cro-demo-note > span:first-child { display: inline-block; vertical-align: middle; margin-right: 6px; }
}