/* The waitlist form, shared by the hero and the pricing band:
   <form class="waitlist-form" data-waitlist> + .waitlist-error + .waitlist-note + .waitlist-done
   inside a [data-waitlist-root]. js/waitlist.js adds .hidden to the form and .joined to the root. */
.waitlist-form {
    display: flex;
    gap: 8px;
    max-width: 440px;
}

.waitlist-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 20px;
    background: var(--bg-page);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.waitlist-form input[type="email"]::placeholder {
    color: var(--text-secondary);
}

.waitlist-form input[type="email"]:focus {
    border-color: var(--focus-ring);
}

.waitlist-form .btn {
    flex-shrink: 0;
}

.waitlist-form.hidden {
    display: none;
}

/* Honeypot: off-screen rather than display:none, so naive bots still fill it */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.waitlist-error {
    max-width: 440px;
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--status-error);
}

.waitlist-error:empty {
    display: none;
}

.waitlist-note {
    max-width: 440px;
    margin-top: 8px;
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--text-secondary);
}

.waitlist-note a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-waitlist-root].joined .waitlist-error,
[data-waitlist-root].joined .waitlist-note {
    display: none;
}

/* After a sign-up: the copy of Figma frame 39 */
.waitlist-done {
    display: none;
}

.waitlist-done.show {
    display: block;
}

.done-label {
    margin-bottom: 6px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 16px;
    /* small text: darkened in light mode, lightened in dark mode, to reach 4.5:1 */
    color: color-mix(in srgb, var(--status-success) 75%, var(--text-primary));
}

.done-title {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 29px;
    color: var(--text-primary);
}

.done-text {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--text-secondary);
}

.done-note {
    margin-top: 10px;
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .waitlist-form {
        flex-direction: column;
        gap: 10px;
    }

    .waitlist-form .btn {
        width: 100%;
    }
}