/* _shared/signup/signup.css
   Structure + neutral default look for domain signup pages.
   Theme ONLY by overriding the custom properties below in a domain's own theme css. */
:root {
  --su-bg: #f4f4f4;
  --su-ink: #1a1a1a;
  --su-muted: #777777;
  --su-accent: #1a1a1a;
  --su-accent-ink: #ffffff;
  --su-field-bg: #ffffff;
  --su-line: #cfcfcf;
  --su-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --su-font-body: Georgia, "Times New Roman", serif;
  --su-font-mono: "Courier New", Courier, monospace;
  --su-weight-thin: 200;
  --su-weight-bold: 800;
  --su-logo-size: 72px;
  --su-width: 420px;
  --su-radius: 2px;
  --su-gap: 20px;
  --su-ok: #1f7a3a;
  --su-ok-bg: #e6f6ea;
  --su-err: #b3261e;
  --su-err-bg: #fdecea;
}
body.su-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--su-bg); color: var(--su-ink); font-family: var(--su-font-body); padding: 32px 16px; }
.su-wrap { width: 100%; max-width: var(--su-width); display: flex; flex-direction: column; align-items: center; gap: var(--su-gap); text-align: center; }
.su-logo { width: var(--su-logo-size); height: var(--su-logo-size); object-fit: contain; }
.su-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--su-font-display); line-height: 1; }
.su-mark-words { font-size: 40px; letter-spacing: .02em; }
.su-thin { font-weight: var(--su-weight-thin); }
.su-bold { font-weight: var(--su-weight-bold); }
.su-sub { font-family: var(--su-font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--su-muted); }
.su-tagline { font-size: 17px; font-style: italic; color: var(--su-ink); }
.su-form { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.su-label { font-family: var(--su-font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--su-muted); text-align: left; }
.su-row { display: flex; gap: 8px; }
.su-input { flex: 1; min-width: 0; padding: 12px; font: 15px var(--su-font-body); color: var(--su-ink); background: var(--su-field-bg); border: 1px solid var(--su-line); border-radius: var(--su-radius); }
.su-input:focus { outline: 2px solid var(--su-accent); outline-offset: 1px; }
.su-button { padding: 12px 20px; font: var(--su-weight-bold) 13px var(--su-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--su-accent-ink); background: var(--su-accent); border: 1px solid var(--su-accent); border-radius: var(--su-radius); cursor: pointer; }
.su-button:hover { opacity: .85; }
.su-thanks { font-family: var(--su-font-mono); font-size: 13px; color: var(--su-ink); }
.su-fine { font-family: var(--su-font-mono); font-size: 10px; color: var(--su-muted); }
@media (max-width: 420px) { .su-row { flex-direction: column; } }
.su-fine a { color: inherit; text-decoration: underline dotted; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.su-ts-widget { margin-top: 10px; }
.su-status { display: block; margin-top: 8px; padding: 8px 10px; font-family: var(--su-font-mono); font-size: 13px; border: 1px solid currentColor; border-radius: var(--su-radius); }
.su-status[hidden] { display: none; }
.su-status.su-ok { color: var(--su-ok); background: var(--su-ok-bg); }
.su-status.su-err { color: var(--su-err); background: var(--su-err-bg); }
.su-button:disabled { opacity: .6; cursor: wait; }