.su { padding-block: 48px 96px; }
.su .wrap { display: grid; gap: 28px; justify-items: center; }
.su-head { display: grid; gap: 14px; width: min(640px, 100%); }
.su-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.su-card { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(18px, 4vw, 32px); display: grid; gap: 24px; }
.stepper { display: grid; gap: 10px; }
.step-label { font-size: 13px; color: var(--ink-2); margin: 0; }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--collapse)); border-radius: 3px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font: 600 11px var(--f-mono); color: var(--ink-2); }
.dots li { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.dots li.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dots li.done { border-color: var(--accent); color: var(--accent); }
.dots li.ghosty { border-style: dashed; opacity: .6; }
.step { display: grid; gap: 16px; }
.step[hidden] { display: none; }
.step h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.sub { color: var(--ink-2); }
.step label { display: grid; gap: 6px; font: 600 13px var(--f-body); }
.step label small { font-weight: 400; color: var(--ink-2); }
.step input[type=text], .step input[type=email], .step input:not([type]) { font: 400 16px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
.step input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.err { color: var(--bad); font-size: 14px; }
.err[hidden] { display: none; }
.actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.actions.start { justify-content: flex-start; }
.plans { display: grid; gap: 10px; }
.plan { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 4px 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.plan:hover { border-color: var(--ink-2); }
.plan:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan input { accent-color: var(--accent); margin: 0; }
.plan b { font: 600 17px var(--f-display); }
.plan .price { font: 600 15px var(--f-mono); }
.plan small { grid-column: 2 / -1; font: 400 12.5px var(--f-body); color: var(--ink-2); }
.fakecard { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 15px; }
.fakecard small { opacity: .7; }
.unis { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.unis legend { font: 600 13px var(--f-body); margin-bottom: 8px; padding: 0; }
.uni { display: grid !important; grid-template-columns: 22px minmax(0,1fr); gap: 12px !important; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; align-items: start; }
.uni:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.uni:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.uni input { accent-color: var(--accent); margin: 3px 0 0; }
.uni b { display: block; font-size: 15px; }
.uni small { display: block; margin-top: 2px; }
.check { display: flex !important; gap: 10px !important; font-weight: 400 !important; font-size: 14px !important; align-items: flex-start; }
.check input { accent-color: var(--accent); margin-top: 3px; }
.done { gap: 18px; }
.summary { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.summary .kv span:last-child { text-align: right; }
.summary .total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; font-weight: 600; font-size: 17px; }
.summary .note { font: 400 12px var(--f-mono); color: var(--ink-2); margin-top: 4px; }