.connection-completion{padding-top:clamp(40px,7vh,80px);padding-bottom:80px;max-width:960px}
.connection-heading{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.connection-completion h1{font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.12;letter-spacing:-.03em;margin:0;max-width:20ch;overflow-wrap:anywhere}
.connection-completion p{font-size:1.1rem;line-height:1.7;max-width:58ch;margin:0 0 24px}
.connection-mark{display:grid;place-items:center;flex:none;width:48px;height:48px;background:var(--soft);border-radius:12px;color:var(--muted)}
.connection-mark svg{width:26px;height:26px}
.is-complete .connection-mark{background:var(--yellow);color:var(--navy)}
.connection-task{background:var(--soft);padding:24px;margin:28px 0 24px;max-width:650px}
.connection-task p{font-size:1rem}
.connection-task .button{margin-bottom:0}
.connection-task .guide-note:empty{display:none}
.connection-task .guide-note:not(:empty){margin:16px 0 0}
.connection-completion .guide-note{font-size:.9rem;color:var(--muted,#4e5c73)}
.connection-completion h1:focus{outline:none}
@media(max-width:600px){.connection-completion{padding-top:32px}.connection-heading{gap:12px}.connection-completion h1{font-size:32px}.connection-mark{width:40px;height:40px}.connection-task{padding:20px}}