.rf-demo{padding-block:calc(var(--rf-section-gap) + var(--space-2)) 0}.rf-demo-head{max-width:var(--width-content);margin-block-end:var(--space-7)}.rf-demo-head h1{margin:var(--space-3) 0 var(--space-4);max-width:var(--width-content)}.rf-demo-frame{aspect-ratio:16/9;border:var(--rf-hairline) solid var(--rf-border-card);border-radius:var(--rf-radius-panel);background:var(--rf-photo-ink);box-shadow:var(--rf-shadow-panel);overflow:hidden}.rf-demo-frame video{object-fit:contain;background:var(--rf-photo-ink);width:100%;height:100%;display:block}.rf-demo-steps{margin:var(--space-6) 0 calc(var(--space-8) + var(--space-6));border-block:var(--rf-hairline) solid var(--rf-hairline-color);grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;list-style:none;display:grid}.rf-demo-steps li{min-width:0;padding:var(--space-5);border-inline-end:var(--rf-hairline) solid var(--rf-hairline-color)}.rf-demo-steps li:last-child{border-inline-end:0}.rf-demo-steps .rf-mono{color:var(--rf-text-3)}.rf-demo-steps h2{margin:calc(var(--space-5) + var(--space-1)) 0 var(--space-2);font:var(--rf-weight-semibold) 17px / 1.3 var(--rf-font-display);letter-spacing:-.012em}.rf-demo-steps p{color:var(--rf-text-2);margin:0;font-size:14px;line-height:1.55}.rf-demo-cta{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6);border-radius:var(--rf-radius-panel);border:var(--rf-hairline) solid var(--rf-hairline-color);background:var(--rf-panel);margin-block-end:var(--space-7);display:flex}.rf-demo-cta p{margin:0}.rf-demo-cta .rf-eyebrow{margin-block-end:var(--space-2)}@media (max-width:860px){.rf-demo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.rf-demo-steps li:nth-child(2){border-inline-end:0}.rf-demo-steps li:nth-child(-n+2){border-block-end:var(--rf-hairline) solid var(--rf-hairline-color)}}@media (max-width:620px){.rf-demo-head{margin-block-end:var(--space-6)}.rf-demo-frame{border-radius:var(--rf-radius-window)}.rf-demo-steps{grid-template-columns:1fr;margin-block-end:var(--space-8)}.rf-demo-steps li,.rf-demo-steps li:nth-child(2){border-inline-end:0;border-block-end:var(--rf-hairline) solid var(--rf-hairline-color)}.rf-demo-steps li:last-child{border-block-end:0}.rf-demo-cta{padding:var(--space-5);flex-direction:column;align-items:flex-start}}
