/* New member sign-up form */
.page-banner .su-help{font-size:var(--step--1);opacity:.85}
.page-banner .su-help a{color:var(--coral);font-weight:700}
.su-wrap{max-width:820px;margin:0 auto}
.su-steps{display:flex;flex-wrap:wrap;gap:.4em;list-style:none;padding:0;margin:0 0 var(--space-4);counter-reset:s}
.su-steps li{counter-increment:s}
.su-steps a{display:inline-flex;align-items:center;gap:.35em;font-family:var(--font-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.35em .8em;border:2px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);background:var(--paper)}
.su-steps a::before{content:counter(s)}
.su-steps a:hover{background:var(--coral-tint)}
.su-card{border:2.5px solid var(--ink);border-radius:var(--radius-lg);background:var(--paper);padding:var(--space-4);margin:0 0 var(--space-4);box-shadow:var(--shadow-stamp);min-width:0;scroll-margin-top:100px}
.su-card legend{float:left;width:100%;display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:800;font-size:var(--step-2);line-height:1.1;margin-bottom:var(--space-3);padding:0}
.su-card legend + *{clear:both}
.su-num{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink);font-size:.7em}
.su-row{grid-template-columns:1fr 1fr!important}
.su-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 var(--space-3)}
@media(max-width:640px){.su-row,.su-row3{grid-template-columns:1fr!important}.su-card{padding:var(--space-3)}}
.su-sub{font-size:var(--step--1);opacity:.85;margin:0 0 var(--space-3);clear:both}
.su-sub a{font-weight:700}
.su-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.su-hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-2)}
.su-hours .field{margin:0;display:grid;grid-template-columns:3.2em 1fr;align-items:center;gap:.6em}
.su-hours .field label{margin:0}
.su-checks{display:flex;flex-wrap:wrap;gap:.5em}
.su-chip{position:relative}
.su-chip input{position:absolute;opacity:0;width:1px;height:1px}
.su-chip span{display:inline-block;padding:.45em .9em;border:2px solid var(--ink);border-radius:999px;font-size:var(--step--1);font-weight:600;cursor:pointer;background:var(--paper)}
.su-chip input:checked + span{background:var(--coral);}
.su-chip input:checked + span::before{content:'✓ '}
.su-chip input:focus-visible + span{outline:3px solid var(--coral-deep);outline-offset:2px}
.su-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;padding:var(--space-4);border:2.5px dashed var(--ink);border-radius:var(--radius-md);background:var(--coral-tint);cursor:pointer;text-align:center}
.su-drop.is-over{background:var(--coral-tint-2)}
.su-drop input{position:absolute;opacity:0;width:1px;height:1px}
.su-drop strong{font-family:var(--font-display);font-size:var(--step-1)}
.su-drop span{font-size:var(--step--1);opacity:.75}
.su-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.su-thumb{position:relative;aspect-ratio:4/3;border:2px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;background:var(--ink)}
.su-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.su-thumb button{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-size:18px;line-height:1;cursor:pointer}
.su-thumb small{position:absolute;left:6px;bottom:6px;font-family:var(--font-mono);font-size:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:1px 7px}
.su-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-2)}
@media(max-width:560px){.su-plans{grid-template-columns:1fr}}
.su-plan{position:relative;cursor:pointer}
.su-plan > input{position:absolute;opacity:0;width:1px;height:1px}
.su-plan > span{display:flex;flex-direction:column;gap:.2em;height:100%;padding:var(--space-3);border:2.5px solid var(--ink);border-radius:var(--radius-md);background:var(--paper);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.su-plan strong{font-family:var(--font-display);font-size:var(--step-1)}
.su-plan b{font-family:var(--font-display);font-size:var(--step-2);line-height:1}
.su-plan b small{font-size:.45em;font-family:var(--font-mono);opacity:.7}
.su-plan em{font-style:normal;font-size:var(--step--1);opacity:.8}
.su-plan > input:checked + span{background:var(--coral-tint);box-shadow:var(--shadow-stamp);transform:translate(-2px,-2px)}
.su-plan > input:focus-visible + span{outline:3px solid var(--coral-deep);outline-offset:2px}
.su-plan b input{width:3.2em;font:inherit;border:0;border-bottom:2.5px solid var(--ink);background:transparent;padding:0;text-align:center}
.su-terms{margin:0 0 var(--space-3);padding:0;list-style:none;display:grid;gap:.6em;counter-reset:t}
.su-terms li{counter-increment:t}
.su-check{display:flex;gap:.7em;align-items:flex-start;font-size:var(--step--1);line-height:1.5;cursor:pointer}
.su-check input{flex:0 0 auto;width:22px;height:22px;margin-top:.05em;accent-color:var(--coral-deep)}
.su-terms .su-check{padding:.7em .9em;border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.su-terms .su-check::before{content:counter(t) '.';font-family:var(--font-mono);font-weight:700;min-width:1.6em}
.su-terms .su-check:has(input:checked){border-color:var(--ink);background:var(--coral-tint)}
.su-all{font-weight:700;margin-bottom:var(--space-4)}
.su-signbox{padding:var(--space-3);border:2.5px solid var(--ink);border-radius:var(--radius-md);background:#fff;margin-bottom:var(--space-3)}
.su-signbox > p{font-size:var(--step--1);margin-bottom:var(--space-3)}
.su-pad{position:relative;height:170px;border:2.5px solid var(--ink);border-radius:var(--radius-sm);background:var(--paper);touch-action:none}
.su-pad::after{content:'';position:absolute;left:18px;right:18px;bottom:38px;border-bottom:2px dashed var(--line);pointer-events:none}
.su-pad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.su-pad__hint{position:absolute;left:20px;bottom:12px;font-family:var(--font-mono);font-size:.75rem;opacity:.5;pointer-events:none}
.su-link{background:none;border:0;padding:.4em 0;font:inherit;font-size:var(--step--1);font-weight:700;text-decoration:underline;cursor:pointer}
.su-err{display:none;margin-bottom:var(--space-3);padding:.8em 1em;border:2px solid #b00020;border-radius:var(--radius-sm);background:#fdecef;color:#7a0016;font-weight:600}
.su-progress{margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);text-align:center;min-height:1.2em}
.su-done h2{font-size:var(--step-3);margin:.3em 0 .5em}
.su-done p{margin-bottom:var(--space-2);max-width:56ch}
.su-invalid{border-color:#b00020!important;box-shadow:0 0 0 4px #fdecef!important}
.su-label{display:block;font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:.5em}
.su-gtk{display:grid;gap:.5em}
.su-gtk__row{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(180px,1.4fr);gap:.6em;align-items:center;padding:.55em .7em;border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.su-gtk__row.is-done{border-color:var(--ink)}
.su-gtk__q{font-weight:600;font-size:var(--step--1)}
.su-yn{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.su-yn label{position:relative;cursor:pointer}
.su-yn input{position:absolute;opacity:0;width:1px;height:1px}
.su-yn span{display:block;padding:.4em .8em;font-family:var(--font-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;border-left:2px solid var(--ink)}
.su-yn label:first-child span{border-left:0}
.su-yn input:checked + span{background:var(--coral)}
.su-yn input:focus-visible + span{outline:3px solid var(--coral-deep);outline-offset:-3px}
.su-gtk__row input[type=text]{width:100%;padding:.5em .7em;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);font:inherit;font-size:var(--step--1)}
@media(max-width:640px){.su-gtk__row{grid-template-columns:1fr auto}.su-gtk__row input[type=text]{grid-column:1/-1}}
