.demo-page{background:var(--surface);min-height:100svh}
.demo-header{max-width:1360px;margin:auto;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.demo-header .brand{gap:2px;color:var(--ink);min-height:44px}
.demo-header .brand-symbol{width:28px;height:28px;flex:none}
.demo-header .brand-name{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.025em}
.demo-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;line-height:20px;font-weight:500;text-underline-offset:4px}
.demo-back:hover{text-decoration:underline}
.demo-layout{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;min-height:calc(100svh - 92px)}
.demo-intro{padding:64px 48px;background:var(--editorial);color:var(--white)}
.demo-intro h1{max-width:480px;margin:0 0 24px;font-size:clamp(36px,4vw,60px);line-height:1.04;letter-spacing:-.03em;font-weight:500}
.demo-intro p{max-width:400px;margin:0;color:#cadce6;font-size:18px;line-height:28px}
.demo-form-wrap{padding:48px;min-width:0;background:var(--white)}
.form-intro{margin:0 0 32px;font-size:18px;line-height:28px;max-width:480px}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-field{min-width:0}
.form-field-wide{grid-column:1/-1}
.form-field label{display:block;margin-bottom:8px;font-size:14px;line-height:20px;font-weight:500}
.form-field label span{color:var(--muted);font-weight:400}
.form-field input,.form-field select,.form-field textarea{display:block;width:100%;min-height:48px;padding:12px;border:1px solid #738b9a;border-radius:4px;background:var(--white);color:var(--ink);font:inherit;font-size:16px;line-height:24px;transition:border-color .2s cubic-bezier(.22,1,.36,1),background .2s cubic-bezier(.22,1,.36,1)}
.form-field select{padding-right:32px}
.form-field textarea{resize:vertical;min-height:112px}
.form-field :is(input,select,textarea):hover{border-color:var(--ink)}
.form-field :is(input,select,textarea):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-color:var(--blue)}
.form-field [aria-invalid=true]{border-color:#a22828}
.field-error{margin:8px 0 0;color:#a22828;font-size:14px;line-height:20px}
.form-privacy{margin:24px 0;color:var(--muted);font-size:14px;line-height:20px;max-width:480px}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-feedback{margin:16px 0;color:#a22828;font-size:14px;line-height:20px}
.form-feedback[data-state=unavailable]{color:var(--muted)}
.demo-submit{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:12px 24px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--white);font:inherit;font-size:16px;line-height:24px;font-weight:500;cursor:pointer;transition:background .25s cubic-bezier(.22,1,.36,1)}
.demo-submit:hover{background:var(--editorial)}
.demo-submit:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.demo-submit:disabled{opacity:.65;cursor:not-allowed}
.form-success{padding:32px 0;outline:none}
.success-icon{width:48px;height:48px;padding:8px;color:var(--blue);margin-bottom:24px}
.form-success h2{font-size:36px;line-height:40px;font-weight:500;letter-spacing:-.025em;margin:0 0 16px}
.form-success p{max-width:440px;font-size:18px;line-height:28px;color:var(--muted);margin-bottom:24px}
.demo-page ::selection{background:#cadce6;color:var(--ink)}
@media(max-width:1000px){.demo-header{padding:16px 32px}.demo-intro{padding:48px 32px}.demo-form-wrap{padding:40px 32px}.form-fields{grid-template-columns:1fr}.form-field-wide{grid-column:auto}}
@media(max-width:760px){.demo-header{padding:12px 16px}.demo-back{gap:8px}.demo-layout{grid-template-columns:1fr;min-height:0}.demo-intro{padding:40px 24px}.demo-intro h1{font-size:36px;max-width:480px}.demo-intro p{font-size:16px;line-height:24px;max-width:480px}.demo-form-wrap{padding:32px 24px 48px}.form-intro{font-size:16px;line-height:24px;margin-bottom:24px}.demo-submit{width:100%}.form-success h2{font-size:30px;line-height:36px}}
@media(prefers-reduced-motion:reduce){.form-field :is(input,select,textarea),.demo-submit{transition:none}}