/* Signup + signup-legal pages. Loads AFTER /assets/corp/corp.css (corporate design system: Inter, tokens, .top/.brand header, .btn, .doc).
   Only form/page-specific rules live here; colors come from corp.css tokens; gradients behind white text use --grad-on (EN #6D5BFF→#007CB5, ES #E32900→#A46800).
   Restyled Oct 20 2026 (Brandsmith brand fix). Markup, consent text and behavior unchanged. */
:root{--err:#B42318;--err-bg:#FEF3F2;--err-line:#F5C2BC;--warn:#FFF7E0;--warn-line:#D9A400;--warn-ink:#5C4300;--accent:#5A48F0}
.es{--accent:#C2410C}
body.su{background:radial-gradient(900px 380px at 50% -120px,color-mix(in srgb,var(--b1) 13%,transparent),transparent 72%) no-repeat,var(--soft)}
.su a{color:var(--accent);text-underline-offset:2px}
.su .top .brand{color:var(--ink)}
.su-lang{color:var(--ink-2)!important;text-decoration:none}
/* page shell */
.su main.su-main{max-width:640px;margin:0 auto;padding:40px 24px 24px}
.su h1{font-size:clamp(1.85rem,4.2vw,2.5rem);letter-spacing:-.03em;margin:0 0 .45em}
.su #h-city,.su #h-trade{color:var(--b1)}
.es #h-city,.es #h-trade{color:#C93C1B}
.su .sub{font-size:1.08rem;color:var(--muted);margin:0 0 20px}
/* cards: corp radius 22px + soft shadow */
.su .proof,.su form,.su .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.su .proof{padding:16px 20px;margin:0 0 18px;display:flex;gap:14px;align-items:center}
.su .proof[hidden],.su .card[hidden],.su form[hidden]{display:none}
.su .proof b{font-size:2rem;font-weight:780;letter-spacing:-.04em;line-height:1;font-feature-settings:"tnum";background:var(--grad-on);-webkit-background-clip:text;background-clip:text;color:transparent}
.su ul.why{list-style:none;padding:0;margin:0 0 24px}
.su ul.why li{position:relative;padding-left:30px;margin:0 0 10px;color:var(--ink-2)}
.su ul.why li::before{content:"";position:absolute;left:2px;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--grad-on)}
.su ul.why li::after{content:"";position:absolute;left:7.5px;top:calc(.42em + 4px);width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* form */
.su form{padding:26px 24px 22px}
.su form label{display:block;font-weight:650;font-size:.95rem;margin:14px 0 6px;color:var(--ink)}
.su form label:first-child{margin-top:0}
.su input[type=text],.su input[type=tel],.su input[type=email]{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid #CFD3DE;border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.su input[type=text]:hover,.su input[type=tel]:hover,.su input[type=email]:hover{border-color:#B7BDCB}
/* focus ring (S2): solid 3px ring, EN violet #6D5BFF 4.57:1 / ES #A46800 4.61:1 on white (the 22% tint was ~1.3:1) */
:root{--ring:#6D5BFF}.es{--ring:#A46800}
.su input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--ring)}
.su input::placeholder{color:#5B647A;opacity:1}   /* M4: was #8A92A6 3.11:1 */
/* service-area dropdown: same box as the text inputs + chevron (data: URI is allowed by the page CSP img-src) */
.su select{width:100%;font:inherit;font-size:16px;padding:13px 44px 13px 14px;border:1px solid #CFD3DE;border-radius:12px;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B647A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px 18px;transition:border-color .15s,box-shadow .15s}
.su select:hover{border-color:#B7BDCB}
.su select:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--ring)}
.su select:has(option[value=""]:checked){color:#5B647A}
.su select option{color:var(--ink)}
/* invalid fields (S3): red border, also on hover; the focus ring color wins while focused */
.su input[aria-invalid="true"],.su select[aria-invalid="true"],.su input[aria-invalid="true"]:hover,.su select[aria-invalid="true"]:hover{border-color:var(--err)}
.su input[aria-invalid="true"]:focus,.su select[aria-invalid="true"]:focus{border-color:var(--ring)}
.su .consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0 6px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.su .consent input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--b1)}
.su .consent input:focus-visible{outline:3px solid #007CB5;outline-offset:2px;box-shadow:none}
.es .su .consent input:focus-visible,.es.su .consent input:focus-visible{outline-color:#A46800}
.su .consent label{font-weight:400;font-size:.875rem;line-height:1.5;margin:0;color:var(--ink-2)}
.su .opt{font-size:.875rem;color:var(--muted);margin:4px 0 0}
/* primary button = corp .btn .btn-primary (16px/650, --grad-on), full width */
.su form .btn{width:100%;margin-top:20px;font-family:inherit;cursor:pointer}
.su form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
/* error + warning states: dark red / dark amber text on light tints (>= 4.5:1) */
.su .err{color:var(--err);font-size:.875rem;font-weight:550;margin:6px 0 0;min-height:1em}
.su .err:not(:empty)::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;background:var(--err);color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.su #err-form:not(:empty){background:var(--err-bg);border:1px solid var(--err-line);border-radius:12px;padding:10px 12px;margin-top:12px}
.su .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.su .card{padding:26px 24px}
.su .done h2{font-size:1.5rem;margin:0 0 .4em}
.su .placeholder{background:var(--warn);border:2px dashed var(--warn-line);border-radius:14px;padding:16px 18px;margin-top:18px;color:var(--warn-ink)}
.su .placeholder strong{color:#3D2C00;letter-spacing:.02em}
.su .placeholder p{margin:.4em 0 0}
/* legal pages: corp .doc inside a white card */
.su main.su-doc{padding:40px 24px 8px}
.su .doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:40px 44px}
.su .doc h1{font-size:clamp(1.8rem,3.6vw,2.4rem)}
.su .doc{overflow-wrap:anywhere}   /* long signup URLs in the SMS Terms pushed 320px pages to 324-329px wide (WCAG 1.4.10) */
/* footer */
.su-foot{color:var(--muted);font-size:.875rem;text-align:center;padding:28px 24px 40px;line-height:1.7}
.su-foot a{color:var(--ink-2)}
@media (max-width:600px){
  .su main.su-main{padding:28px 18px 16px}
  .su form,.su .card{padding:22px 18px 18px}
  .su main.su-doc{padding:20px 12px 4px}
  .su .doc{padding:26px 20px}
}
/* S9 reflow (WCAG 1.4.10): at 320px the header (wordmark + language button) was 343px (EN) / 364px (ES) wide.
   Smaller lockup + button and, as a fallback, let the header wrap onto two rows instead of scrolling sideways. */
@media (max-width:360px){
  .su .top .wrap.nav{gap:8px;padding:0 12px;flex-wrap:wrap;height:auto;min-height:60px;row-gap:6px}
  .su .top .brand{font-size:15px;gap:7px}
  .su .top .brand svg{width:26px;height:26px}
  .su .su-lang{padding:8px 12px;font-size:14px}
  .su main.su-main{padding-left:14px;padding-right:14px}
}