.demo-page{min-height:100vh;background:oklch(.995 .003 95)}.demo-header{position:fixed;z-index:40;top:0;right:0;left:0;background:oklch(.995 .003 95/.94);box-shadow:0 1px 0 oklch(.18 .01 250/.08);backdrop-filter:blur(20px) saturate(118%);-webkit-backdrop-filter:blur(20px) saturate(118%)}.demo-header-inner{display:flex;height:68px;align-items:center;justify-content:space-between}.demo-back-link{display:inline-flex;min-height:44px;align-items:center;gap:8px;color:oklch(.38 .01 250);font-size:13px;font-weight:620;transition:color .16s var(--ease-standard),transform .14s var(--ease-out-smooth)}.demo-back-link:active{transform:scale(.97)}.demo-main{padding-top:69px}.demo-layout{display:grid;padding-block:clamp(58px,7vw,96px) 80px;grid-template-columns:minmax(0,.45fr) minmax(520px,.55fr);align-items:start;gap:clamp(60px,7vw,112px)}.demo-intro{position:sticky;top:118px}.demo-eyebrow{color:var(--color-blue);font-size:11px;font-weight:720;letter-spacing:.08em}.demo-intro h1{margin:18px 0 0;font-size:clamp(40px,3.75vw,56px);font-weight:680;line-height:1.08;letter-spacing:-.055em}.demo-lead{max-width:520px;margin:28px 0 0;color:oklch(.38 .01 250);font-size:15px;line-height:1.85}.demo-form{padding:clamp(26px,3vw,38px);border:1px solid oklch(.82 .008 250);background:oklch(.998 .002 95);box-shadow:0 24px 70px oklch(.2 .01 250/.055)}.demo-form-heading{padding-bottom:26px;border-bottom:1px solid oklch(.88 .006 250)}.demo-form-heading-topline{display:flex;align-items:center;justify-content:space-between;gap:20px}.demo-form-heading-topline>span:first-child{color:var(--color-blue);font-size:10px;font-weight:720;letter-spacing:.06em}.demo-form-heading-topline>span:last-child{color:oklch(.48 .01 250);font-size:11px;font-weight:620}.demo-form-heading h2{margin:10px 0 0;font-size:clamp(25px,2.5vw,34px);font-weight:680;line-height:1.15;letter-spacing:-.04em}.demo-form-heading p{margin:12px 0 0;color:oklch(.48 .01 250);font-size:12px;line-height:1.7}.demo-form-progress{position:relative;display:grid;margin:24px 0 0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none}.demo-form-progress:before{position:absolute;top:8px;right:25%;left:25%;height:1px;background:oklch(.82 .008 250);content:""}.demo-form-progress li{position:relative;display:grid;justify-items:center;gap:7px;color:oklch(.53 .01 250);font-size:11px;font-weight:600;text-align:center}.demo-form-progress li span{z-index:1;display:grid;width:18px;height:18px;border:1px solid oklch(.76 .008 250);border-radius:50%;background:oklch(.998 .002 95);place-items:center;font-size:8px}.demo-form-progress li.is-active{color:oklch(.24 .01 250)}.demo-form-progress li.is-active span{border-color:var(--color-blue);background:var(--color-blue);color:white}.demo-form-step{animation:demo-step-enter .22s var(--ease-out-smooth)}.demo-field-grid{display:grid;margin-top:27px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}.demo-field-grid-first{grid-template-columns:1fr}.demo-field{display:block}.demo-field>span:first-child{display:block;margin-bottom:9px;color:oklch(.3 .01 250);font-size:12px;font-weight:650}.demo-field small{margin-left:4px;color:oklch(.52 .01 250);font-size:10px;font-weight:500}.demo-field input,.demo-field select,.demo-field textarea{width:100%;appearance:none;border:1px solid oklch(.82 .008 250);border-radius:6px;background:oklch(.995 .003 95);color:oklch(.2 .01 250);font:inherit;font-size:14px;transition:border-color .16s var(--ease-standard),box-shadow .16s var(--ease-standard)}.demo-field input,.demo-field select{min-height:48px;padding:0 13px}.demo-select-wrap{position:relative;display:block}.demo-select-wrap select{padding-right:42px}.demo-select-wrap svg{position:absolute;top:50%;right:14px;color:oklch(.38 .01 250);pointer-events:none;transform:translateY(-50%)}.demo-field textarea{min-height:92px;padding:12px 13px;line-height:1.65;resize:vertical}.demo-field-wide{grid-column:1/-1}.demo-field input::placeholder,.demo-field textarea::placeholder{color:oklch(.59 .01 250)}.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{border-color:var(--color-blue);box-shadow:0 0 0 1px var(--color-blue);outline:none}.demo-field input:focus-visible,.demo-field select:focus-visible,.demo-field textarea:focus-visible{outline:2px solid oklch(.46 .2 255);outline-offset:2px}.demo-submit-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin-top:23px}.demo-submit-row-step-2{justify-content:space-between}.demo-submit{min-height:48px;appearance:none;border:0;cursor:pointer;font:inherit;font-size:13px}.demo-submit:disabled{cursor:wait;opacity:.62}.demo-back-button{display:inline-flex;min-height:48px;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:oklch(.38 .01 250);cursor:pointer;font:inherit;font-size:12px;font-weight:640}.demo-back-button:disabled{cursor:wait;opacity:.52}.demo-form-status{width:100%;display:inline-flex;max-width:330px;align-items:flex-start;gap:7px;margin:0;font-size:11px;line-height:1.55}.demo-form-status svg{flex:none;margin-top:1px}.demo-form-status-success{color:oklch(.46 .14 150)}.demo-form-status-error{color:oklch(.5 .19 28)}.demo-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}@keyframes demo-step-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (hover:hover) and (pointer:fine){.demo-back-button:hover,.demo-back-link:hover{color:oklch(.18 .01 250);transform:translateX(-2px)}}@media (max-width:900px){.demo-layout{grid-template-columns:1fr;gap:46px}.demo-intro{position:static}.demo-intro h1{max-width:680px}.demo-lead{max-width:620px}}@media (max-width:600px){.demo-header .brand-logo{width:128px}.demo-back-link{font-size:12px}.demo-layout{padding-block:48px 56px;gap:38px}.demo-intro h1{margin-top:14px;font-size:clamp(26px,7.8vw,34px);line-height:1.1}.demo-lead{margin-top:22px;font-size:14px;line-height:1.8}.demo-form{margin-inline:-16px;padding:28px 16px;border-right:0;border-left:0;box-shadow:none}.demo-field-grid{grid-template-columns:1fr}.demo-field input,.demo-field select,.demo-field textarea{font-size:16px}.demo-submit-row{align-items:stretch}.demo-submit-row-step-1 .demo-submit{width:100%}.demo-submit-row-step-2{align-items:center}.demo-form-status{max-width:none}}@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){.demo-header{background:oklch(.995 .003 95);backdrop-filter:none;-webkit-backdrop-filter:none}}