/* Форма «Повідомити, коли вийде для iPhone» (дизайн v64/v65). Кольори — змінні сторінки (--btn, --acc, --accsoft, --err, --ok…). */
.wl{display:flex;flex-direction:column;gap:12px;text-align:left}
.wl form{display:flex;flex-direction:column;gap:12px;margin:0}
.wl h2{margin:0;font:700 18px/24px var(--font)}
.wl p{margin:0;font:400 14px/20px var(--font);color:var(--tx2)}
.wl .fld{display:flex;flex-direction:column;gap:6px}
.wl .fld label{font:600 13px/18px var(--font);color:var(--tx)}
.wl .fld input{height:52px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--card2);color:var(--tx);font:400 16px/1 var(--font);width:100%}
.wl .fld input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
.wl .fld--err input,.wl .fld--err input:focus{border-color:var(--err)}
.wl .msg{display:flex;align-items:flex-start;gap:6px;font:400 13px/18px var(--font)}
.wl .msg--err{color:var(--err)}
.wl .chk{display:flex;align-items:flex-start;gap:10px;min-height:44px;font:400 14px/20px var(--font);color:var(--tx);cursor:pointer}
.wl .chk input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:7px;border:2px solid var(--tx2);display:grid;place-items:center;cursor:pointer;background:transparent}
.wl .chk input:checked{background:var(--btn);border-color:var(--btn)}
.wl .chk input:checked::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.wl .chk a{color:var(--acc);font-weight:600}
.wl .sbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:8px 16px;border-radius:26px;border:0;background:var(--btn);color:var(--onbtn);font:600 16px/20px var(--font);text-align:center;cursor:pointer}
.wl .sbtn[disabled]{background:var(--chip);color:var(--tx2);cursor:default}
.wl .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--tx2) 35%,transparent);border-top-color:var(--tx2);flex:none}
@media (prefers-reduced-motion:no-preference){.wl .spin{animation:wlsp .8s linear infinite}}
@keyframes wlsp{to{transform:rotate(360deg)}}
.wl .done{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--ok) 14%,transparent)}
.wl .done .ck{flex:none;width:28px;height:28px;border-radius:14px;background:var(--ok);display:grid;place-items:center;color:var(--bg)}
.wl .done b{display:block;font:700 16px/22px var(--font)}
.wl .done span{font:400 14px/20px var(--font);color:var(--tx2);overflow-wrap:anywhere}