.su { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 50px; padding: 130px 0 40px; align-items: start; }
.su-side { position: sticky; top: 110px; }
.su-side h1 { font-size: clamp(38px, 4.6vw, 62px); margin: 16px 0 16px; }
.su-next { list-style: none; counter-reset: n; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.su-next li { counter-increment: n; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; }
.su-next li::before { content: counter(n); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--display); color: #fff; background: var(--purple); box-shadow: 0 8px 20px -8px rgba(112,73,232,.8); }
.su-next b { font-family: var(--display); } .su-next span { color: var(--muted); font-size: 14px; }
.su-help { margin-top: 26px !important; font-size: 14px; color: var(--muted); } .su-help a { color: inherit; font-weight: 700; }
.su-card { padding: 34px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.su-card h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; }
.su-sub { color: var(--ink-2); margin: -8px 0 22px; }
.su-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.su-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.su-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--line); color: var(--ink-2); }
.su-steps .on { color: var(--ink); border-color: var(--purple); } .su-steps .on i { background: var(--purple); color: #fff; }
.su-steps .done i { background: var(--mint-2); color: #0b1020; }
.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.su-wide { grid-column: 1 / -1; }
.su-f { display: grid; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); border: 0; padding: 0; margin: 0; }
.su-f em { font-style: normal; font-weight: 500; color: var(--muted); } .su-f i { color: #e0445f; font-style: normal; }
.su-f legend { padding: 0; margin-bottom: 9px; }
.su-f input, .su-f textarea { width: 100%; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 15.5px/1.4 var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.su-f input:focus, .su-f textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent); }
.su-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.su-chips label { cursor: pointer; position: relative; }
.su-chips input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.su-chips span { display: inline-block; padding: 9px 15px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink); transition: all .15s; }
.su-chips input:checked + span { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 16%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--purple); }
.su-chips input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.su-error { color: #e0445f; font-weight: 600; font-size: 14px; margin-top: 16px; } .su-error:empty { display: none; }
.su-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.su-actions .btn.primary { padding: 14px 26px; font-size: 15.5px; }
.su-review { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 22px; }
.su-review div { padding: 12px 14px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.su-review dt { font-size: 12px; color: var(--muted); font-weight: 700; } .su-review dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.su-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.su-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--purple); flex: none; }
.su-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.su-pick button { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; transition: all .2s; }
.su-pick button:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: var(--shadow); }
.su-pick .i { font-size: 28px; } .su-pick b { font: 800 18px/1.2 var(--display); } .su-pick small { color: var(--muted); font-size: 13.5px; }
.su-done { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 20px 0; }
.su-done .su-sub { margin: 0 0 14px; max-width: 52ch; }
.su-check svg { width: 84px; height: 84px; }
.su-check circle { fill: none; stroke: var(--mint-2); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: su-draw .6s ease forwards; }
.su-check path { fill: none; stroke: var(--mint-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: su-draw .4s .45s ease forwards; }
@keyframes su-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 960px) { .su { grid-template-columns: 1fr; gap: 26px; padding-top: 110px; } .su-side { position: static; } .su-next { display: none; } }
@media (max-width: 560px) { .su-card { padding: 22px 16px; border-radius: 22px; } .su-grid, .su-review, .su-pick { grid-template-columns: 1fr; } .su-actions { flex-direction: column-reverse; } .su-actions .btn { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .su-check circle, .su-check path { animation: none; stroke-dashoffset: 0; } }