/* Want it button states, first-want pop-up, toast. */
.btn--wanted { background: var(--ink); color: var(--highlight); border-color: var(--ink); }
.btn--wanted:hover { color: var(--highlight); filter: brightness(1.15); }
.btn[disabled] { opacity: .6; cursor: progress; }

.want-dialog { margin: auto; border: none; padding: 0; border-radius: 28px; background: var(--paper); color: var(--ink); width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 64px -24px rgba(15,42,30,.5); }
.want-dialog::backdrop { background: rgba(15,42,30,.55); }
.want-dialog__form { position: relative; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.want-dialog__title { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.035em; padding-right: 40px; }
.want-dialog__text { margin: 0; color: var(--muted); font-size: 16px; }
.want-dialog__form input[type=email] { height: 56px; padding: 0 22px; border-radius: 28px; border: 1.5px solid var(--ink); background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.want-dialog__check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.want-dialog__check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.want-dialog__fine { margin: 0; font-size: 13px; color: var(--muted-2); text-align: center; }
.want-dialog__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--ground); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.want-dialog__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; background: var(--ink); color: var(--highlight); padding: 14px 22px; border-radius: 999px; font-weight: 700; box-shadow: 0 12px 32px -12px rgba(15,42,30,.5); max-width: calc(100vw - 32px); text-align: center; }