.demo-page{box-sizing:border-box;min-height:100dvh;color:var(--blu);justify-content:center;padding:88px 20px 56px;display:flex;position:relative}.demo-page.fluted:before{z-index:0;opacity:.55}.demo-page .hero__texture{z-index:-1;opacity:0;width:100%;height:100%;transition:opacity .8s;display:block;position:absolute;inset:0}.demo-page .hero__texture.is-ready{opacity:1}.demo-page .demo-logo,.demo-page .demo-home{z-index:2;color:var(--white);text-decoration:none;position:absolute;top:20px}.demo-logo{padding:8px 0;display:flex;left:24px}.demo-logo svg{width:72px;height:auto}.demo-home{-webkit-backdrop-filter:blur(8px);background:#293b5e61;border:1px solid #ffffff4d;border-radius:999px;align-items:center;gap:6px;height:36px;padding:0 14px;font-size:13px;font-weight:500;transition:background .2s;display:inline-flex;right:20px}.demo-page .demo-home:hover{background:#293b5e8c}.demo-home:focus-visible,.demo-logo:focus-visible{outline:2px solid var(--white);outline-offset:3px}.demo-ico{flex-shrink:0;width:16px;height:16px}.demo-col{z-index:1;align-self:center;width:100%;max-width:600px;position:relative}.demo-head{text-align:center;color:var(--white)}.demo-page .demo-title{font-family:var(--font-display);letter-spacing:-.045em;margin:0;font-size:clamp(30px,4vw,44px);font-weight:600;line-height:1.05}.demo-page .demo-title.is-dark{color:var(--blu);font-size:clamp(26px,3vw,32px)}.demo-page .demo-head p{color:#ffffffd1;max-width:44ch;margin:10px auto 0;font-size:15px;line-height:1.5}.demo-progress{gap:8px;margin-top:28px;display:flex}.demo-progress span{background:#ffffff40;border-radius:999px;flex:1;height:4px;transition:background .3s}.demo-progress span.is-on{background:var(--white)}.demo-page .demo-step{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#ffffffbf;margin:10px 0 14px;font-size:11px}.demo-card{background:var(--white);border-radius:22px;gap:24px;padding:28px;animation:.4s both demo-in;display:grid;box-shadow:0 30px 60px -30px #191a1d73,0 0 0 1px #293b5e0f}@keyframes demo-in{0%{opacity:0;transform:translateY(10px)}}.demo-field{align-content:start;gap:10px;min-width:0;display:grid}.demo-page .demo-field__label{margin:0;font-size:14px;font-weight:600;line-height:1.35}.demo-field__label em{color:var(--muted);margin-left:6px;font-size:12.5px;font-style:normal;font-weight:400}.demo-page .demo-field__error{color:#c2410c;margin:0;font-size:12.5px}.demo-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.demo-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.demo-grid.is-4{grid-template-columns:repeat(4,1fr)}.demo-opt{border:1.5px solid var(--line);background:var(--white);width:100%;color:var(--blu);font:inherit;text-align:left;cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:11px 14px;transition:border-color .2s,background .2s,transform .15s;display:flex}.demo-opt:hover{border-color:var(--line-strong)}.demo-opt:active{transform:scale(.99)}.demo-opt.is-on{border-color:var(--accent);background:#5b60d80f}.demo-opt:focus-visible,.demo-chip:focus-visible,.demo-consent:focus-visible,.demo-btn:focus-visible,.demo-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo-opt__icon{background:var(--surface);width:32px;height:32px;color:var(--muted);border-radius:9px;flex-shrink:0;place-items:center;transition:background .2s,color .2s;display:grid}.demo-opt__icon svg{width:18px;height:18px}.demo-opt.is-on .demo-opt__icon{background:var(--accent);color:var(--white)}.demo-opt__text{flex:1;min-width:0}.demo-opt__text b{font-size:13.5px;font-weight:600;line-height:1.25;display:block}.demo-opt__text small{color:var(--muted);margin-top:2px;font-size:12px;line-height:1.3;display:block}.demo-opt__mark{box-sizing:border-box;border:1.5px solid var(--line-strong);width:18px;height:18px;color:var(--white);border-radius:999px;flex-shrink:0;place-items:center;transition:background .2s,border-color .2s;display:grid}.demo-opt__mark.is-box{border-radius:5px}.demo-opt__mark svg{width:11px;height:11px}.demo-opt.is-on .demo-opt__mark,.demo-consent.is-on .demo-opt__mark{border-color:var(--accent);background:var(--accent)}.demo-opt.is-compact{text-align:center;flex-direction:column;justify-content:center;gap:0;padding:12px 6px}.demo-opt.is-compact .demo-opt__text b{font-family:var(--font-display);letter-spacing:-.03em;font-size:20px}.demo-opt.is-compact .demo-opt__text small{margin-top:0}.demo-chips{flex-wrap:wrap;gap:8px;display:flex}.demo-chip{border:1.5px solid var(--line);background:var(--white);height:36px;color:var(--blu);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:13.5px;transition:border-color .2s,background .2s,color .2s;display:inline-flex}.demo-chip:hover{border-color:var(--line-strong)}.demo-chip svg{width:12px;height:12px}.demo-chip.is-on{border-color:var(--accent);background:var(--accent);color:var(--white)}.demo-input{box-sizing:border-box;border:1.5px solid var(--line);background:var(--surface);height:46px;color:var(--muted);border-radius:999px;align-items:center;gap:10px;padding:0 16px;transition:border-color .2s,background .2s,box-shadow .2s;display:flex}.demo-input:focus-within{border-color:var(--accent);background:var(--white);color:var(--accent);box-shadow:0 0 0 4px #5b60d81f}.demo-input input{min-width:0;height:100%;color:var(--blu);font:inherit;background:0 0;border:0;outline:none;flex:1;margin:0;padding:0;font-size:14.5px}.demo-input input::placeholder,.demo-textarea::placeholder{color:#293b5e61}.demo-field.has-error .demo-input{border-color:#ea580c}.demo-textarea{box-sizing:border-box;border:1.5px solid var(--line);background:var(--surface);width:100%;min-height:84px;color:var(--blu);font:inherit;resize:vertical;border-radius:16px;outline:none;margin:0;padding:12px 16px;font-size:14.5px;line-height:1.45;transition:border-color .2s,background .2s,box-shadow .2s}.demo-textarea:focus{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 4px #5b60d81f}.demo-consents{gap:10px;display:grid}.demo-consent{color:var(--blu);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:flex-start;gap:10px;padding:0;font-size:13.5px;line-height:1.4;display:flex;position:relative}.demo-consent .demo-opt__mark{margin-top:1px}.demo-consent__input{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.demo-consent__input:focus-visible+.demo-opt__mark{outline:2px solid var(--accent);outline-offset:2px}.demo-consent a{color:var(--accent);text-underline-offset:2px}.demo-consent.has-error .demo-opt__mark{border-color:#ea580c}.demo-page .demo-send-error{color:#9a3412;background:#fff1e8;border-radius:12px;margin:0;padding:12px 14px;font-size:13.5px}.demo-actions{justify-content:flex-end;align-items:center;gap:12px;display:flex}.demo-page .demo-btn{background:var(--blu);height:50px;color:var(--white);font:inherit;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 26px;font-size:15px;font-weight:500;text-decoration:none;transition:background .2s,transform .15s;display:inline-flex}.demo-page .demo-btn:hover{background:var(--accent);color:var(--white)}.demo-btn .demo-ico{transition:transform .2s}.demo-btn:hover .demo-ico{transform:translate(2px)}.demo-btn:active{transform:scale(.98)}.demo-btn:disabled{opacity:.6;cursor:progress}.demo-back{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;margin-right:auto;padding:8px 4px;font-size:14px;display:inline-flex}.demo-back:hover{color:var(--blu)}.demo-done{text-align:center;justify-items:center;gap:0;padding:40px 32px}.demo-done__check{background:var(--accent);width:52px;height:52px;color:var(--white);border-radius:999px;place-items:center;margin-bottom:18px;display:grid}.demo-done__check svg{width:22px;height:22px}.demo-page .demo-done p{max-width:42ch;color:var(--muted);margin:10px 0 0;font-size:15px;line-height:1.5}.demo-page .demo-done .demo-done__board{background:var(--neutro);color:var(--blu);text-align:left;border-radius:12px;align-items:center;gap:10px;margin-top:20px;padding:12px 16px;font-size:13.5px;display:flex}.demo-done__board .flow-shape{width:14px;height:14px;color:var(--accent);flex-shrink:0}.demo-page .demo-done__code{font-family:var(--font-mono);font-size:12.5px}.demo-done__code b{color:var(--blu)}.demo-done .demo-btn{margin-top:26px}@media (max-width:600px){.demo-page{padding:76px 14px 32px}.demo-logo{top:16px;left:18px}.demo-home{top:16px;right:14px}.demo-card{border-radius:18px;gap:22px;padding:20px 16px}.demo-row,.demo-grid{grid-template-columns:1fr}.demo-grid.is-4{grid-template-columns:repeat(4,1fr);gap:6px}.demo-opt.is-compact{padding:10px 2px}.demo-actions .demo-btn{flex:1}.demo-done{padding:32px 20px}}@media (prefers-reduced-motion:reduce){.demo-card{animation:none}}
