/* UGNAY sign-up page. Same palette and look as the sign-in page: seastone blue + gold. */
:root{
  --blue:#1F4E5F; --blue-dark:#163842; --blue-mid:#2A647B;
  --gold:#E3A61E; --gold-tint:#FBF1D9; --gold-text:#6B4E00;
  --ink:#13262D; --muted:#5C6B71; --line:#DCE4E6; --danger:#B3261E;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.su{font-family:var(--sans);color:var(--ink);background:var(--blue-dark);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
button{font-family:inherit}

.su-shell{display:grid;grid-template-columns:minmax(290px,.62fr) minmax(0,1.6fr);min-height:100vh}

/* ---------- Left: light, stays put while the long form scrolls ---------- */
.su-left{position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;background:linear-gradient(180deg,#F8FAFA 0%,#EAF1F2 100%);overflow:hidden}
.su-left::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/motif-contours-dark.svg) right bottom/cover no-repeat}
.su-left>*{position:relative;z-index:1}
.su-left-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 14px;margin-bottom:22px}
.su-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.su-mark{flex:none;width:48px;height:48px;border-radius:8px;display:block;object-fit:cover;box-shadow:0 6px 16px rgba(22,56,66,.2)}
.su-brand-text{display:flex;flex-direction:column;gap:3px}
.su-brand-name{font-size:22px;font-weight:800;letter-spacing:.02em;line-height:1;color:var(--ink)}
.su-brand-sub{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.su-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
.su-nav a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0}
.su-nav a:hover{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:2px}
.su-nav a.su-pill{display:inline-flex;align-items:center;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font:800 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);box-shadow:0 2px 8px rgba(22,56,66,.06);text-decoration:none}
.su-nav a.su-pill:hover{border-color:var(--gold);text-decoration:none}

.su-left-body{margin:auto 0}
.su-eyebrow{margin:0 0 12px;font:800 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px}
.su-eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);border-radius:2px}
.su-left-title{margin:0 0 16px;font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.su-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:520px}
.su-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.86);box-shadow:0 6px 18px rgba(22,56,66,.06)}
.su-step-num{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--blue);color:var(--gold);font-weight:800;font-size:16px;box-shadow:inset 0 -3px 0 var(--gold)}
.su-step-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.su-step-text strong{font-size:15px;color:var(--ink)}
.su-step-text span{font-size:13.5px;line-height:1.45;color:#44565D}
.su-left-foot{margin-top:24px;font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7A8A90}

/* ---------- Right: the form (the page scrolls here) ---------- */
.su-right{position:relative;display:flex;padding:44px 40px 48px;color:#fff;overflow:hidden;
  background:radial-gradient(900px 520px at 88% -8%,rgba(227,166,30,.22),transparent 62%),linear-gradient(160deg,var(--blue-dark) 0%,var(--blue) 55%,#27647B 100%)}
.su-right::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/motif-contours.svg) center/cover no-repeat}
.su-right-inner{position:relative;z-index:1;width:100%;max-width:640px;margin:auto}
.su-gateway{margin:0 0 6px;display:flex;align-items:center;gap:12px;font:700 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.su-gateway::before{content:"";flex:none;width:34px;height:1px;background:rgba(255,255,255,.6)}
.su-welcome{margin:10px 0 12px;font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1;color:#fff}
.su-welcome span{color:var(--gold)}
.su-welcome span::after{content:"";display:block;height:4px;width:min(100%,300px);margin-top:12px;border-radius:2px;background:linear-gradient(90deg,var(--gold),rgba(227,166,30,0))}
.su-meaning{margin:0 0 26px;max-width:32em;font-size:14.5px;line-height:1.5;letter-spacing:.005em;color:rgba(255,255,255,.93);text-wrap:balance}

.su-card{position:relative;padding:28px 28px 22px;border-radius:28px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.075);box-shadow:0 20px 50px rgba(8,24,30,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.su-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.su-intro{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.94)}

.su-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.su-full{grid-column:1/-1}
.su-label{display:block;margin:0 0 7px;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.96)}
.su-cell{margin-bottom:16px;min-width:0}
.su-input{width:100%;height:52px;padding:0 16px;border:2px solid transparent;border-radius:16px;background:#fff;color:var(--ink);font:500 16px var(--sans);outline:none;transition:border-color .12s,box-shadow .12s}
.su-input::placeholder{color:#93A1A6}
.su-input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(227,166,30,.28)}
.su-passwrap{position:relative}
.su-passwrap .su-input{padding-right:52px}
.su-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:#6F8087;cursor:pointer}
.su-eye:hover{background:#EEF3F4;color:var(--blue)}
.su-eye[aria-pressed="true"]{color:var(--blue)}
.su-help{margin:7px 2px 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.9)}
/* signup.js paints a bad field's border with var(--danger); its message goes here, in a tint that reads on the dark card */
.su-field-error{margin:7px 2px 0;font-size:13px;font-weight:600;line-height:1.4;color:#FFE6E2}
.su-error{margin:4px 0 16px;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.45;background:rgba(179,38,30,.28);border:1px solid rgba(255,150,140,.55);color:#FFE9E6}

.su-btn{width:100%;height:56px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:18px;background:#fff;color:var(--blue);font:800 17px var(--sans);cursor:pointer;box-shadow:0 8px 22px rgba(8,24,30,.22);transition:background .12s,color .12s,transform .06s}
.su-btn[type="submit"]::after{content:"\2192";font-size:20px;line-height:1}  /* an arrow that survives signup.js rewriting the label */
.su-btn:hover{background:var(--gold);color:#2B1F00}
.su-btn:active{transform:translateY(1px)}
.su-btn[disabled]{opacity:.7;cursor:progress}
.su-btn:focus-visible,.su-eye:focus-visible,.su-nav a:focus-visible,.su-brand:focus-visible,.su-resend a:focus-visible,.su-login-line a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

#verify-section{padding-top:2px}
.su-panel-title{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.01em}
.su-panel-text{margin:0 0 18px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.94)}
.su-panel-text b{color:#fff;overflow-wrap:anywhere}
.su-code{height:60px;margin-bottom:6px;text-align:center;font:700 26px var(--mono);letter-spacing:.5em;padding:0 8px 0 .5em}
/* signup.js shows both errors AND "A new code has been sent." here, setting the text colour to var(--blue) for the
   latter — a dark teal that would vanish on this card. Re-pointing --blue inside this box makes that inline colour cream. */
.su-msg{--blue:#FFF0CC;margin:10px 0 12px;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.45;background:rgba(10,30,38,.34);border:1px solid rgba(255,255,255,.28);color:#FFE6E2}
.su-resend{margin:16px 0 4px;text-align:center;font-size:14.5px;color:rgba(255,255,255,.93)}
.su-resend a,.su-login-line a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.su-resend a:hover,.su-login-line a:hover{color:var(--gold)}
.su-success{margin:6px 0 4px;padding:16px 18px;border-radius:18px;font-size:15.5px;line-height:1.55;background:rgba(12,34,42,.45);border:1px solid rgba(227,166,30,.7);border-left:4px solid var(--gold);color:#FFF3D6}
.su-login-line{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:14.5px;color:rgba(255,255,255,.93)}

.su-foot-card{margin-top:16px;display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.06)}
.su-logo{flex:none;width:56px;height:56px;border-radius:15px;background:#fff;display:grid;place-items:center;overflow:hidden}
.su-logo img{width:44px;height:44px;object-fit:contain;display:block}
.su-foot-text{flex:1;text-align:center;display:flex;flex-direction:column;gap:4px}
.su-foot-small{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.94)}
.su-foot-main{font-weight:800;font-size:14.5px;line-height:1.3}

/* ---------- Tablet and phone ---------- */
@media (max-width:1099px){
  .su-left{padding:22px 20px 18px}
  .su-right{padding:40px 28px 44px}
}
@media (max-width:899px){
  .su-shell{grid-template-columns:minmax(0,1fr)}
  .su-right{order:-1;padding:30px 16px 28px}
  .su-left{padding:22px 16px 20px}
  .su-left-body{margin:6px 0 0}
  .su-welcome{font-size:clamp(38px,11vw,52px)}
  .su-card{padding:20px 16px 16px;border-radius:24px}
  .su-card::before{left:16px;right:16px}
  .su-foot-main{font-size:13px}
}
@media (max-width:560px){
  .su-grid{grid-template-columns:minmax(0,1fr)}
  .su-code{letter-spacing:.35em;font-size:24px}
}
@media (max-width:420px){
  .su-brand-sub{display:none}
  .su-foot-card{gap:10px;padding:12px}
  .su-logo{width:48px;height:48px}
}
@media (max-width:380px){
  .su-gateway{letter-spacing:.13em}
  .su-gateway::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}