/* Delete-account page. Card follows the landing's try-it box; the red is the app's delete button (#C8372D). */
.del{max-width:1200px;margin:0 auto;padding:72px 24px 120px;box-sizing:border-box;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:start}
.del-card{position:relative;background:#F4F6FA;border-radius:28px;padding:36px;box-sizing:border-box;min-height:440px;display:flex;flex-direction:column}
.del-card>svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);overflow:visible;pointer-events:none}
.steps-bar{position:relative;display:flex;gap:6px;margin-bottom:28px}
.steps-bar span{height:4px;flex:1;border-radius:999px;background:#D5DCE8;transition:background .4s ease}
.steps-bar span.on{background:#2D5BE3}
.step-pane{position:relative;display:flex;flex-direction:column;gap:16px;animation:jbEntryIn .5s cubic-bezier(.2,.8,.2,1) both}
.step-pane[hidden]{display:none}
.pane-num{font:400 12px/16px 'IBM Plex Mono',monospace;color:#5B667A;letter-spacing:.04em}
.step-pane h2{font-weight:600;font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:-0.02em}
.step-pane p{font-size:17px;line-height:26px;color:#16223A;text-wrap:pretty}
.step-pane p.small,.del-side .side-small{font-size:15px;line-height:22px;color:#5B667A}
.field{display:flex;align-items:center;gap:10px;height:60px;padding:0 18px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #D5DCE8;transition:box-shadow .2s}
.field:focus-within{box-shadow:inset 0 0 0 2px #2D5BE3}
.field input{flex:1;min-width:0;border:none;background:none;font-size:18px;color:#16223A;height:100%}
.field.code input{font:400 24px 'IBM Plex Mono',monospace;letter-spacing:.3em}
.area{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#5B667A}
.area textarea{font:inherit;font-size:16px;line-height:24px;color:#16223A;border:none;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #D5DCE8;padding:14px 18px;resize:vertical}
.area textarea:focus{outline:none;box-shadow:inset 0 0 0 2px #2D5BE3}
.btn{height:54px;border:none;border-radius:8px;font-weight:600;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
.btn.primary{background:#2D5BE3;color:#FFFFFF}
.btn.primary:hover{background:#1F47C2}
.btn.danger{background:#C8372D;color:#FFFFFF}
.btn.danger:hover{background:#A92D25}
.btn.secondary{background:#FFFFFF;color:#16223A;box-shadow:inset 0 0 0 1px #D5DCE8}
.btn.secondary:hover{color:#16223A;background:#E3E8F0}
.btn[disabled]{opacity:.6;cursor:progress}
.links-row{display:flex;flex-wrap:wrap;gap:8px 20px}
.link{border:none;background:none;padding:0;font-size:15px;color:#2D5BE3;cursor:pointer}
.link:hover{color:#1F47C2}
.done-mark{width:56px;height:56px;border-radius:999px;background:#C8372D;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.done-mark.blue{background:#2D5BE3}
.del-error{position:relative;margin-top:16px;padding:12px 16px;border-radius:12px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #C8372D;color:#C8372D;font-size:15px;line-height:22px}
.del-error[hidden]{display:none}

.del-side{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{position:relative;display:flex;flex-direction:column;gap:4px;padding:0 0 24px 28px}
.timeline li::before{content:'';position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #2D5BE3}
.timeline li::after{content:'';position:absolute;left:8px;top:22px;bottom:2px;border-left:1.5px dashed #D5DCE8}
.timeline li:last-child::after{display:none}
.timeline li:last-child::before{background:#C8372D;box-shadow:none}
.timeline b{font-weight:600;font-size:17px}
.timeline span{font-size:16px;line-height:24px;color:#5B667A;text-wrap:pretty}
.side-note{display:flex;gap:14px;padding:18px 20px;border-radius:16px;background:#F4F6FA;font-size:16px;line-height:25px}
.side-note jb-icon{color:#2D5BE3;margin-top:1px}