/* The sign-up dialog (public/signup-modal.js), over any page, and the landing page's closing section that opens it.
   Built on styles.css: .modal, .modal-shell, .icon-x, .signin-agree, .signin-state, .signin-badge, .legal-modal. */

.signup-modal { width: min(500px, calc(100vw - 32px)); }
.signup-modal .modal-shell { position: relative; height: auto; max-height: calc(100svh - 32px); }
.signup-modal .sm-close { position: absolute; top: 12px; right: 12px; z-index: 1; }
.sm-body { overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 24px; }
.sm-step h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; padding-right: 28px; }
.sm-step h2:focus { outline: none; }
.sm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 12px/1 var(--font); color: var(--muted); }
.sm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-signal) 16%, transparent); }
.sm-lead { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.sm-form { display: grid; gap: 8px; margin-top: 20px; }
.sm-form .signup-plan { margin-bottom: 6px; }
.sm-label { font-size: 13px; font-weight: 600; }
.sm-form input[type="email"] { width: 100%; padding: 12px 13px; font-size: 16px; border-radius: 10px; }
.sm-form .field-inline select { padding: 10px; border-radius: 8px; }
.sm-form .signin-agree { margin-top: 6px; font-size: 13.5px; }
.sm-form .button.wide { margin-top: 6px; min-height: 48px; border-radius: 10px; }
.sm-form .button[aria-busy="true"] { cursor: progress; }
.sm-form .signin-agree a { color: var(--accent); }
.sm-step .signin-lead { margin-top: 8px; font-size: 15px; color: var(--muted); }
.sm-step .signin-lead .signin-address { display: block; margin-top: 2px; }
.sm-step .error:not(:empty) { margin-top: 12px; }
.sm-dev { margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 13.5px; }
.sm-actions { display: grid; gap: 6px; justify-items: center; margin-top: 22px; }
.sm-actions .button { width: 100%; min-height: 48px; border-radius: 10px; }
.sm-actions .link-btn { font-size: 14px; font-weight: 600; color: var(--muted); padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; }
.sm-step .signin-ways .link-btn { padding: 3px 0; font: 600 13.5px/1.4 var(--font); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.sm-step .signin-state p { margin: 0; }
.sm-step .signin-state p + p, .sm-step .signin-state ul + p { margin-top: 6px; }
/* The legal text, stacked over the sign-up. */
.sm-legal .legal-modal-foot .button { min-height: 40px; }

/* Phones: a sheet from the bottom, as tall as its content. */
@media (max-width: 640px) {
  .signup-modal { width: 100vw; max-width: 100vw; margin: auto 0 0; }
  .signup-modal .modal-shell { height: auto; max-height: 92svh; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; }
  .signup-modal[open] { animation: sm-sheet-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sm-body { padding: 26px 18px calc(18px + env(safe-area-inset-bottom)); }
  .sm-step h2 { font-size: 21px; }
  .sm-form .signup-plan { gap: 8px; }
  .sm-form .field-inline { min-width: 130px; }
}
@keyframes sm-sheet-in { from { transform: translateY(40px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .signup-modal[open] { animation: none; } }

/* The landing page's closing section: the headline, a line and the button that opens the dialog. */
.cta-box.cta-compact { grid-template-columns: minmax(0, 1fr) auto; }
/* The closing section: the FAQ above and the footer below bring their own space, so 72px either side of the card. */
.section.cta:has(.cta-compact) { padding: 0 0 24px; }
.cta-compact .cta-actions { margin-top: 0; }
.cta-compact .button { min-height: 48px; padding: 0 24px; font-size: 15px; }
@media (max-width: 860px) {
  .cta-box.cta-compact { grid-template-columns: minmax(0, 1fr); }
  .cta-compact .cta-actions .button { flex: 1 1 auto; }
}