/* ============================================================
   Email modal — shared by the marketing home page and the blog.
   Relies on the design tokens (--ink, --orange, etc.) and the
   .btn classes defined in home.css / index.css.
   ============================================================ */

.email-modal {
    width: min(440px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(22, 32, 31, .28);
    /* Hidden until shown via showModal(); dialog handles this, but keep
       it explicit so unstyled flashes can't happen. */
}

.email-modal:not([open]) {
    display: none;
}

.email-modal::backdrop {
    background: rgba(22, 32, 31, .55);
    backdrop-filter: blur(2px);
}

.email-modal__inner {
    position: relative;
    padding: 2rem 1.9rem 1.7rem;
    font-family: var(--sans);
}

.email-modal__close {
    position: absolute;
    top: .75rem;
    right: .8rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.email-modal__close:hover {
    color: var(--ink);
    background: rgba(22, 32, 31, .06);
}

.email-modal__eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 .7rem;
}

.email-modal__title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 .5rem;
}

.email-modal__text {
    margin: 0 0 1.4rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--muted);
}

.email-modal__address {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin-bottom: 1.2rem;
}

.email-modal__email {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: .7rem .9rem;
    font-family: var(--mono);
    font-size: .95rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
}

.email-modal__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .9rem;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.email-modal__copy:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.email-modal__copy svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.email-modal__copy.is-copied {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}

.email-modal__actions {
    display: flex;
}

.email-modal__actions .btn {
    flex: 1 1 auto;
    text-align: center;
}

.email-modal__hint {
    margin: 1rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
}

/* Visually hidden live region for copy confirmation */
.email-modal__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .email-modal[open] {
        animation: email-modal-in .18s ease-out;
    }

    @keyframes email-modal-in {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}