.demo{color:#fff;background:#000;justify-content:center;align-items:center;min-height:100svh;padding:clamp(24px,5vw,56px) clamp(16px,4vw,48px);display:flex}.demo__container{justify-content:center;align-items:center;width:min(560px,100%);margin:0 auto;display:flex}.demo__card{background:#c2410c;border-radius:14px;gap:10px;width:min(400px,100%);margin:0 auto;padding:28px 28px 30px;display:grid;position:relative;box-shadow:0 16px 30px #0003}.demo__card--success{width:min(320px,100%);padding:24px 20px 22px}.demo__close{color:#ffffffd9;cursor:pointer;background:0 0;border:none;padding:0;font-size:22px;line-height:1;position:absolute;top:10px;right:10px}.demo__cardTitle{letter-spacing:-.4px;color:#fff;margin:0;font-size:50px;font-weight:700;line-height:1}.demo__cardText{color:#ffffffeb;margin:0;font-size:16px;font-weight:600;line-height:1.4}.demo__form{gap:12px;margin-top:10px;display:grid}.demo__row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.demo__input{color:#111;background:#f0f0f0;border:1px solid #d7d7d7;border-radius:4px;outline:none;width:100%;height:46px;padding:0 14px;font-size:16px}.demo__textarea{color:#111;resize:none;width:100%;min-height:106px;font:inherit;background:#f0f0f0;border:1px solid #d7d7d7;border-radius:4px;outline:none;padding:12px 14px}.demo__input::placeholder,.demo__textarea::placeholder{color:#5a5a5a}.demo__input:focus,.demo__textarea:focus{border-color:#8b8b8b}.demo__button{color:#f7f7f7;cursor:pointer;background:#000;border:none;border-radius:4px;width:100%;height:44px;margin-top:2px;font-size:18px;font-weight:700;line-height:1}.demo__button:hover{filter:brightness(.97)}.demo__button:disabled{opacity:.75;cursor:not-allowed}.demo__error{color:#ffe1e1;margin:0;font-size:14px;font-weight:600}.demo__success{flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;margin-top:6px;padding:4px 8px 2px;display:flex}.demo__successCheck{color:#fff;background:#000;border-radius:999px;place-items:center;width:64px;height:64px;font-size:30px;font-weight:700;display:grid}.demo__successText{color:#fff;text-align:center;margin:0;font-size:18px;font-weight:700}.demo__successSubtext{color:#fff;text-align:center;margin:0;font-size:14px;font-weight:500}@media (max-width:480px){.demo__card{padding:24px 18px 20px}.demo__cardTitle{font-size:40px}.demo__cardText{font-size:15px}.demo__button{font-size:16px}}
