.demo-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-l);align-items:start}.demo-render-box{padding:var(--space-l);border:1px solid var(--border-color-primary);border-radius:var(--radius-m);background:var(--bg-color-surface)}.demo-render-box::before{content:"Result";display:block;font-size:var(--text-s);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-emphasis);margin-block-end:var(--space-m)}.code-block{background:var(--color-grey-800);color:var(--color-grey-100);padding:var(--space-m);border-radius:var(--radius-m);white-space:pre-wrap}.code-block+.code-block{margin-top:var(--space-m)}.cf-btn{display:inline-block;padding:var(--btn-space);border-radius:var(--radius-s);border:0;cursor:pointer;font-weight:600;font-family:var(--body-font-family);background:var(--bg-color-surface)}:where(#example-1-render-box) button{font-family:var(--body-font-family)}:where(#example-1-render-box) .btn-primary{background:var(--color-primary);color:var(--color-text-on-brand);padding:var(--btn-space);border:0;border-radius:var(--radius-s);cursor:pointer}:where(#example-1-render-box) #contact-submit{width:100%}:where(#example-1-render-box) [data-track]{cursor:pointer}:where(#example-1-render-box) [type="submit"]{font-weight:600}:where(#example-1-render-box) .btn-primary:hover{background:var(--color-primary-deep)}:where(#example-2-render-box) button{color:gray}:where(#example-2-render-box) .e2-btn-primary{color:blue}:where(#example-2-render-box) #e2-contact-submit{color:red}.e3-hero{font-family:var(--heading-font-family);background:color-mix(in srgb,var(--color-primary),transparent 92%);padding:var(--space-l);border-radius:var(--radius-m);text-align:center;color:var(--color-primary)}:where(#example-4-render-box) .e4-cta{background:var(--color-emphasis);color:var(--text-color-title);font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:var(--space-s) var(--space-l);border-radius:var(--radius-m);box-shadow:var(--shadow-s);transition:transform 250ms var(--ease-2),box-shadow 250ms var(--ease-2),background 250ms var(--ease-2)}:where(#example-4-render-box) .e4-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-m)}.src-btn{display:inline-block;padding:var(--btn-space);border-radius:var(--radius-s);border:0;cursor:pointer;font-weight:600;color:#fff;background:blue}button{background:purple}.src-btn.other-btn{background-color:pink}.src-btn{background:red}#example-6-render-box .e6-btn-primary{display:inline-block;padding:var(--btn-space);border-radius:var(--radius-s);border:0;cursor:pointer;font-weight:600;background:var(--color-primary);color:var(--color-text-on-brand)}#example-6-render-box #e6-contact-submit{background:var(--color-secondary)}#example-6-render-box .e6-important-button{background:orange}@media (max-width:768px){.demo-section{grid-template-columns:1fr}}.builderiusContent .uni-node-u75aa4920f{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-deep));color:var(--color-text-on-brand);box-shadow:0 4px 20px color-mix(in srgb,var(--color-primary),transparent 60%),0 0 0 1px color-mix(in srgb,var(--color-primary-light),transparent 80%)}.builderiusContent .uni-node-u75aa4920f:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));box-shadow:0 8px 30px color-mix(in srgb,var(--color-primary),transparent 45%),0 0 0 1px color-mix(in srgb,var(--color-primary-light),transparent 60%)}