/* Signup front door modal + inline form (docs/SIGNUP_FRONT_DOOR.md). Pexels-style: one centered
   card, big plain inputs, one green button. Uses the site tokens so light and dark both work;
   type sized for 50+ readers (see homepage_type_scale_50plus). */

html.sd-lock, html.sd-lock body { overflow: hidden; }

.sd-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(10, 14, 22, 0.62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sd-overlay.is-open { display: flex; }

.sd-modal {
    position: relative;
    width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #232a33);
    border: 1px solid var(--border, #e7e2d7);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 34px 32px 26px;
    animation: sd-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sd-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sd-modal { animation: none; } }

.sd-close {
    position: absolute; top: 10px; right: 12px;
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-muted, #8b95a2);
    font-size: 28px; line-height: 1; cursor: pointer;
}
.sd-close:hover { color: var(--text-primary, #232a33); background: var(--accent-dim, rgba(14,163,113,.1)); }

.sd-back {
    border: 0; background: none; padding: 0 0 10px; cursor: pointer;
    color: var(--text-secondary, #55606e); font: inherit; font-size: 16px; font-weight: 600;
}

.sd-title {
    font-family: var(--font-heading, inherit);
    font-size: 26px; line-height: 1.2; font-weight: 700;
    text-align: center; margin: 0 0 8px; text-wrap: balance;
}
.sd-sub {
    font-size: 18px; line-height: 1.45; text-align: center;
    color: var(--text-secondary, #55606e); margin: 0 0 22px;
}

/* Entry question */
.sd-choices { display: flex; flex-direction: column; gap: 12px; }
.sd-choice {
    display: flex; align-items: center; gap: 14px; width: 100%;
    text-align: left; text-decoration: none; cursor: pointer; font: inherit;
    padding: 16px 16px; border-radius: 14px;
    border: 1.5px solid var(--border, #e7e2d7);
    background: var(--bg-primary, #fbfaf7); color: var(--text-primary, #232a33);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.sd-choice:hover, .sd-choice:focus-visible { border-color: var(--accent, #0ea371); background: var(--accent-dim, rgba(14,163,113,.1)); outline: none; }
.sd-choice:active { transform: scale(0.99); }
.sd-choice__icon { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.sd-choice__text { display: flex; flex-direction: column; gap: 3px; }
.sd-choice__text strong { font-size: 19px; font-weight: 700; }
.sd-choice__text span { font-size: 16px; color: var(--text-secondary, #55606e); line-height: 1.35; }

/* Form */
.sd-form { display: flex; flex-direction: column; }
.sd-label { font-size: 15px; font-weight: 600; color: var(--text-secondary, #55606e); margin: 0 0 6px 2px; }
.sd-input {
    width: 100%; height: 52px; padding: 0 16px; margin: 0 0 14px;
    font: inherit; font-size: 18px;
    color: var(--text-primary, #232a33);
    background: var(--bg-primary, #fbfaf7);
    border: 1.5px solid var(--border, #e7e2d7); border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sd-input::placeholder { color: var(--text-muted, #8b95a2); }
.sd-input:focus { outline: none; border-color: var(--accent, #0ea371); box-shadow: 0 0 0 3px var(--accent-dim, rgba(14,163,113,.15)); }
.sd-input.is-bad { border-color: var(--danger, #ef4444); }
.sd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sd-err {
    font-size: 16px; color: var(--danger, #ef4444); margin: -4px 0 12px 2px; line-height: 1.4;
}
.sd-submit {
    display: block; width: 100%; height: 54px; margin-top: 6px;
    border: 0; border-radius: 12px; cursor: pointer;
    background: #22b35a; color: #fff;
    font: inherit; font-size: 19px; font-weight: 700;
    text-align: center; line-height: 54px; text-decoration: none;
    transition: background-color .15s ease;
}
.sd-submit:hover { background: #1c9a4d; color: #fff; }
.sd-submit:disabled { opacity: .7; cursor: default; }
.sd-fine { font-size: 15px; text-align: center; color: var(--text-secondary, #55606e); margin: 12px 0 0; }
.sd-terms { font-size: 14px; text-align: center; color: var(--text-muted, #8b95a2); margin: 18px 0 0; }
.sd-terms a, .sd-foot a { color: var(--text-primary, #232a33); text-decoration: underline; text-underline-offset: 3px; }
.sd-foot { font-size: 17px; text-align: center; margin: 14px 0 0; color: var(--text-primary, #232a33); }

.sd-done { text-align: center; padding: 8px 0 4px; }
.sd-done__icon { font-size: 46px; margin-bottom: 8px; }

/* Inline card on /signup/ */
.sd-card {
    max-width: 480px; margin: 0 auto;
    background: var(--bg-card, #fff); color: var(--text-primary, #232a33);
    border: 1px solid var(--border, #e7e2d7); border-radius: 18px;
    box-shadow: var(--shadow-lift, 0 12px 30px rgba(0,0,0,.1));
    padding: 34px 32px 26px;
}

@media (max-width: 520px) {
    .sd-modal, .sd-card { padding: 28px 20px 22px; border-radius: 16px; }
    .sd-title { font-size: 24px; }
    .sd-sub { font-size: 17px; }
}