/* Hallmark · page: beta application · genre: modern-minimal · macrostructure: Letter · theme: application-dark · anchor hue: cool blue · pre-emit critique: P5 H5 E5 S5 R5 V4 */
.beta-page {
    margin: var(--nav-height) auto 0;
}

.beta-hero {
    display: grid;
    min-height: calc(100svh - var(--nav-height));
    place-items: center;
    padding: var(--space-2xl) var(--page-gutter);
}

.beta-hero__content {
    width: min(100%, 48rem);
    text-align: center;
}

.beta-hero h1 {
    margin-top: var(--space-lg);
    font-size: clamp(1.75rem, 8vw, 4.5rem);
    white-space: nowrap;
}

.beta-panel__intro {
    margin: var(--space-lg) auto 0;
    color: var(--color-ink-2);
    font-size: clamp(0.875rem, 3vw, var(--text-md));
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.beta-form {
    width: min(100%, 36rem);
    margin: var(--space-2xl) auto 0;
    text-align: left;
}

.beta-form label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 700;
}

.beta-form__field {
    display: flex;
    gap: var(--space-xs);
}

.beta-form input[type="email"] {
    min-width: 0;
    flex: 1;
    min-height: var(--control-min);
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-control);
    background: var(--color-paper-2);
    color: var(--color-ink);
    outline: var(--rule-strong) solid var(--color-transparent);
    outline-offset: var(--space-2xs);
    transition: background-color var(--dur-micro) var(--ease-out), outline-color var(--dur-micro) var(--ease-out);
}

.beta-form input[type="email"]:hover {
    background: var(--color-paper-3);
}

.beta-form input[type="email"]::placeholder {
    color: var(--color-muted);
}

.beta-form input[type="email"]:focus-visible {
    outline-color: var(--color-focus);
}

.beta-form__hint {
    min-height: 1lh;
    margin-top: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.6;
}

.beta-form__message {
    min-height: 1.7em;
    margin-top: var(--space-sm);
    color: var(--color-error);
    font-size: var(--text-sm);
}

.beta-form[data-state="success"] {
    display: none;
}

.beta-form[data-state="loading"] [data-beta-submit] {
    cursor: wait;
}

.beta-form[data-state="loading"] [data-beta-submit-label]::after {
    content: " …";
}

.beta-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.beta-scroll-link,
.beta-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--control-min);
    margin-top: var(--space-2xl);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-micro) var(--ease-out);
}

.beta-scroll-link:hover,
.beta-scroll-link:active,
.beta-back-link:hover,
.beta-back-link:active {
    color: var(--color-accent-hover);
}

.beta-success[hidden] {
    display: none;
}

.beta-success {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin-top: var(--space-2xl);
    padding: var(--space-md);
    border-left: var(--rule-strong) solid var(--color-success);
    background: var(--color-paper-2);
    text-align: left;
}

.beta-success__mark {
    display: inline-grid;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-success);
    color: var(--color-paper);
    font-weight: 700;
}

.beta-success h2 {
    margin: 0;
    font-size: var(--text-md);
}

.beta-success p {
    margin-top: var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.beta-details {
    width: min(100%, var(--page-max));
    margin-inline: auto;
    padding: var(--space-4xl) var(--page-gutter) var(--space-3xl);
    /*
     * Cancel the page scroll-padding so this section's top meets the viewport top.
     * Otherwise the end of the hero stays in view under the nav.
     */
    scroll-margin-top: calc(-1 * (var(--nav-height) + var(--space-md)));
}

.beta-details__heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(var(--space-xl), 8vw, var(--space-4xl));
    align-items: end;
    padding-bottom: var(--space-2xl);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.beta-details__heading .section-kicker {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
}

.beta-details__heading h2 {
    max-width: 12ch;
}

.beta-details__heading p:last-child {
    max-width: 34ch;
    color: var(--color-ink-2);
}

.beta-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.beta-steps li {
    padding-top: var(--space-xl);
    border-top: var(--rule-strong) solid var(--color-accent);
}

.beta-step__number {
    color: var(--color-accent-hover);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.beta-steps h3 {
    margin-top: var(--space-lg);
    font-size: var(--text-lg);
}

.beta-steps p {
    margin-top: var(--space-sm);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.beta-details__note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-3xl);
    padding-top: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-rule);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.beta-details__note strong {
    color: var(--color-ink);
}

.beta-back-link {
    margin-top: var(--space-xl);
}

.beta-footer {
    margin-top: 0;
}

@media (max-width: 40rem) {
    .beta-hero {
        padding-inline: var(--space-md);
    }

    .beta-details {
        padding-inline: var(--space-md);
    }

    .beta-form__field {
        flex-direction: column;
    }

    .beta-form__field .button {
        width: 100%;
    }

    .beta-details__heading {
        display: block;
    }

    .beta-details__heading h2 {
        max-width: 15ch;
    }

    .beta-details__heading p:last-child {
        margin-top: var(--space-lg);
    }

    .beta-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .beta-steps li {
        padding-block: var(--space-xl);
    }

    .beta-steps li + li {
        border-top: var(--rule-hair) solid var(--color-rule);
    }
}