.demo-card{justify-self:center;gap:16px;width:100%;max-width:640px;margin-top:48px;padding:44px 48px;display:grid}.demo-card h1{font-size:40px;line-height:1.08}.demo-form{gap:10px;margin-top:8px;display:grid}.demo-form label{font-family:var(--display);font-size:14px;font-weight:700}.demo-row{flex-wrap:wrap;gap:10px;display:flex}.demo-row input{min-width:0;font:inherit;border:2px solid var(--line);background:var(--offwhite);color:var(--ink);border-radius:999px;flex:240px;padding:12px 18px;font-size:16px}.demo-row input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}.demo-row input[aria-invalid=true]{border-color:var(--oranje)}.demo-row .btn{cursor:pointer;font-family:var(--display);border:0}.demo-row .btn:disabled{opacity:.6;cursor:progress}.demo-error{color:#b4441d;font-size:14px}.demo-note{color:var(--muted);font-size:13px}.demo-done{font-family:var(--display);font-size:21px;font-weight:700}.hp{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}@media (max-width:720px){.demo-card{padding:30px 26px}.demo-card h1{font-size:32px}}.demo-context{background:var(--blauw);border-radius:16px;gap:12px;padding:18px;display:grid}.demo-context h2{font-size:22px}.demo-context ul{gap:8px;padding-left:20px;display:grid}.demo-context p{font-size:14px;line-height:1.6}