/* signmaster.com trade-account signup (decision 0005). Mobile-first; brand orange #f26520 used as-is,
   with bold 19px button text for contrast. Text sized in px (the site root is 14px).
   The page wears the login page's look: dark #212121 ground (.call-to-action), a light #efefef container with
   10px corners, the white form card inside it. Nothing sits on the dark ground but the nav and footer. */
.su-page { background: #212121; }
.su-wrap { max-width: 592px; margin: 0 auto; padding: 150px 16px 96px; box-sizing: border-box; }
.su-frame { background: #efefef; border-radius: 10px; padding: 24px; color: #222; }
.su-card { background: #fff; border-radius: 8px; padding: 24px 20px; text-align: left; color: #222; font-size: 16px; overflow-wrap: anywhere; }
.su-step { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #595959; margin: 0 0 6px; text-transform: uppercase; }
.su-title { font-size: 22px; line-height: 1.3; margin: 0 0 8px; color: #222; font-weight: 700; }
.su-sub { font-size: 15px; color: #555; margin: 0 0 18px; line-height: 1.45; }
.su-field { margin: 0 0 14px; }
.su-field label { display: block; font-size: 14px; font-weight: 600; color: #333; margin: 0 0 4px; }
.su-optional { font-weight: 400; color: #595959; }
.su-field input, .su-field select { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; padding: 10px 12px; border: 1px solid #767676; border-radius: 8px; background: #fff; color: #222; }
/* Focus: a thin brand-orange ring (Tommy, 2026-10-04: no bright blue; orange if thin). Fields get it flush on
   their edge; buttons, links and checkboxes get it 2px out, so it reads on the orange button too. #f26520 on white
   is about 3.2:1, past the 3:1 a focus ring needs. A field with an error keeps its red while focused. */
.su-field input:focus, .su-field select:focus { outline: 2px solid #f26520; outline-offset: 0; }
.su-field input[aria-invalid="true"]:focus, .su-field select[aria-invalid="true"]:focus { outline-color: #b42318; }
.su-btn:focus, .su-link:focus, .su-btn-secondary:focus, .su-pw-toggle:focus, .su-check input:focus, .su-card a:focus, .su-links a:focus { outline: 2px solid #f26520; outline-offset: 2px; }
.su-field input[aria-invalid="true"], .su-field select[aria-invalid="true"] { border-color: #b42318; }
.su-error { color: #b42318; font-size: 14px; margin: 6px 0 0; }
.su-error-box { background: #fdecea; border: 1px solid #b42318; color: #7a1a12; border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; font-size: 15px; }
.su-notice { background: #eef6ee; border: 1px solid #2e7d32; color: #1e4d20; border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; font-size: 15px; }
.su-help { font-size: 14px; margin: 6px 0 0; }
.su-row { display: flex; gap: 10px; }
.su-row > .su-field { flex: 1; min-width: 0; }
.su-row > .su-field.su-narrow { flex: 0 0 90px; }
.su-btn { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: #f26520; color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.su-btn[disabled] { opacity: .7; cursor: default; }
.su-btn-secondary { min-height: 44px; border: 2px solid #f26520; background: #fff; color: #222; font-weight: 700; font-size: 16px; border-radius: 8px; padding: 8px 14px; cursor: pointer; margin: 6px 0; }
.su-link { background: none; border: 0; padding: 6px 0; min-height: 44px; color: #b24a0f; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.su-inline { display: inline; margin: 0; }
.su-links { margin: 14px 0 0; font-size: 15px; text-align: center; }
.su-foot { font-size: 14px; color: #666; margin: 16px 0 0; }
.su-foot a, .su-help a { color: #b24a0f; font-weight: 600; }
.su-code { letter-spacing: 8px; font-size: 22px !important; text-align: center; font-weight: 700; }
.su-code::placeholder { color: #a6a6a6; font-weight: 400; }
.su-alert { background: #fff6e5; border: 1px solid #c77700; border-radius: 8px; padding: 12px; margin: 0 0 16px; font-size: 15px; }
.su-alert p { margin: 0 0 8px; }
.su-alert .su-addr-label { margin: 0 0 2px; }
.su-alert .su-addr { background: #fff; border: 1px solid #d6d6d6; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; font-weight: 700; line-height: 1.45; }
.su-check { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; min-height: 44px; padding-top: 8px; }
.su-check input { width: 20px; height: 20px; margin-top: 2px; }
.su-fieldset { border: 1px solid #d6d6d6; border-radius: 8px; padding: 12px; margin: 0 0 14px; }
.su-fieldset legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.su-pw { position: relative; }
.su-pw input { padding-right: 84px; }
.su-pw-toggle { position: absolute; right: 0; top: 0; bottom: 0; min-height: 44px; min-width: 76px; border: 1px solid #767676; border-radius: 0 8px 8px 0; background: #f4f4f4; font-size: 14px; font-weight: 600; cursor: pointer; }
.su-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The sign-in card (customer/login/login.cfm) uses these styles too. Its page loads customer/login/style.css, which
   sets the body font and gives every input and button a small margin; the card keeps the signup's font and edges. */
.su-frame, .su-card { font-family: "Poppins", sans-serif; }
.su-field input, .su-field select, .su-card .su-btn, .su-btn-wide { margin-left: 0; margin-right: 0; }
.su-btn-wide { display: block; width: 100%; min-height: 48px; }
.su-or { text-align: center; color: #595959; font-size: 14px; margin: 16px 0 4px; }
.su-center { text-align: center; }
.su-error-box a, .su-alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.su-wrap.su-standalone { padding-top: 48px; }
.su-tips { margin: 0 0 4px; padding-left: 20px; font-size: 14px; color: #555; line-height: 1.7; list-style: disc; }
.su-tips li { list-style: disc; }
/* A row of separate actions (two-factor: backup code, resend): side by side when they fit, stacked when not. */
.su-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: 8px 0 0; }
/* Links inside a card read as one family: 14px, semibold, orange-brown, underlined on hover. 32px tall keeps the
   row compact and still clears the 24px minimum tap target. */
.su-actions .su-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; font-size: 14px; text-decoration: none; }
.su-link.su-link-inline { min-height: 0; padding: 0; font-size: inherit; vertical-align: baseline; }
.su-actions .su-link:hover, .su-foot a:hover { text-decoration: underline; }
/* Hover stays in the brand family: the site's base a:hover is blue and would otherwise win on <a> links. */
.su-card a.su-link:hover, .su-foot a:hover, .su-help a:hover, .su-links a:hover { color: #8f3b0c; }
.su-error-box a:hover, .su-alert a:hover { color: inherit; }
/* A checkbox line that wraps on a phone still leaves room above the button. */
.su-check + .su-btn { margin-top: 14px; }
@media (max-width: 767px) {
  .su-wrap { padding-top: 110px; padding-bottom: 56px; }
  /* /login.cfm's section only leaves 80px on phones; clear the nav the way the signup page does. */
  .call-action-content .su-frame { margin-top: 30px; }
}
@media (max-width: 420px) {
  .su-wrap { padding-left: 12px; padding-right: 12px; }
  .su-frame { padding: 10px; }
  .su-card { padding: 20px 16px; }
  .su-row { flex-wrap: wrap; }
  .su-row > .su-field, .su-row > .su-field.su-narrow { flex: 1 1 100%; }
}