.pg{min-height:100vh}
.top{max-width:1240px;margin-inline:auto;padding:24px var(--ds-gutter)}
.box{max-width:640px;margin-inline:auto;padding:clamp(20px,4vw,48px) var(--ds-gutter) 80px}
.mark{color:var(--ds-accent);width:56px;height:56px;border-radius:50%;background-color:var(--ds-accent-wash);display:grid;place-items:center;margin-bottom:24px;animation:pop 520ms var(--ds-ease-out) both}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.mark path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw 400ms 260ms ease-out forwards}
.box h1{font-size:clamp(2rem,1.6rem + 2vw,3.25rem);animation:rise var(--ds-dur-4) 180ms var(--ds-ease-out) both}
.sub{color:var(--ds-text-2);font-size:1.125rem;margin-top:12px;animation:rise var(--ds-dur-4) 260ms var(--ds-ease-out) both}
.sub bdi{font-weight:600;color:var(--ds-text)}
.tl{list-style:none;margin:32px 0 0;padding:0;border:1px solid var(--ds-border);border-radius:var(--ds-radius);overflow:hidden}
.tl li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 22px;border-bottom:1px solid var(--ds-border);align-items:baseline;animation:rise var(--ds-dur-4) var(--ds-ease-out) both}
.tl li:nth-child(1){animation-delay:340ms}.tl li:nth-child(2){animation-delay:430ms}.tl li:nth-child(3){animation-delay:520ms;border-bottom:0}
.tl b{font-weight:600}.tl small{font-size:.875rem;color:var(--ds-text-2)}.tl p{grid-column:1/-1;font-size:.9375rem;color:var(--ds-text-2)}
.done small{color:var(--ds-accent);font-weight:600}
.next{margin-top:36px;animation:fade var(--ds-dur-4) 640ms ease-out both}
.next h2{font-size:1.25rem;margin-bottom:14px}
.help{margin-top:26px;font-size:.9375rem;color:var(--ds-text-2);animation:fade var(--ds-dur-4) 700ms ease-out both}
@media (max-width:560px){.next .btn{flex:1 1 100%}}