/* 製品版のお知らせ（中の名前は waitlist）の登録欄。トップと about で共用（2026-09-26 人間（声で）「about の『先行版は、招待した方に。』も、TOP と同じ感じにしましょう」）。
   色はそれぞれのページの変数を使う。--paper-hi / --hair が無いページ（about）向けに既定値を付けてある。 */
.wl-os{ display:flex; gap:6px 14px; justify-content:center; flex-wrap:wrap; margin:12px 0 0; padding:0; border:0; font-size:13px; font-weight:700; color:var(--muted); }
.wl-os legend{ float:left; padding:0; margin-right:2px; } .wl-os label{ display:inline-flex; gap:5px; align-items:center; cursor:pointer; color:var(--ink-2); }
.wl-os input{ accent-color:var(--pink); margin:0; }
.wl-ts{ display:flex; justify-content:center; } .wl-ts:not(:empty){ margin-top:12px; }
.wl-msg.err{ color:var(--pink-deep); }
.wl{ display:flex; gap:10px; max-width:520px; margin:26px auto 0; }
.wl input{ flex:1; min-width:0; font:600 16px var(--font); color:var(--ink); background:var(--paper-hi, rgba(255,255,255,.85)); border:1px solid var(--hair, rgba(36,31,46,.14)); border-radius:999px; padding:13px 20px; outline:none; transition:border-color .15s, box-shadow .15s; }
.wl input:focus{ border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft); }
.wl .btn{ flex:none; }
.wl-msg{ min-height:1.6em; margin:14px 0 0; font-size:14.5px; font-weight:700; color:var(--ink-2); }
.wl-msg a{ color:var(--pink-deep); }
.wl-sub{ font-size:13px; color:var(--muted); margin:18px 0 0; } .wl-sub a{ color:var(--ink-2); font-weight:700; }
@media (max-width:520px){ .wl{ flex-direction:column; } .wl .btn{ justify-content:center; } }
.wl .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }