/* Studio onboarding — local so deploys do not wait on main CSS */

.ob-fade-item{
  opacity:0;
  transform:translate3d(0,14px,0);
  animation:obWelcomeFade .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--ob-fade-delay, 0ms);
}
@keyframes obWelcomeFade{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

.ob-split-left--legal{
  position:relative;
  align-items:flex-start !important;
  padding:32px 22px 36px 22px !important;
}
.ob-split-copy{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  padding:12px 0 24px;
}
.ob-split-left--legal .ob-split-copy{
  align-items:flex-start !important;
  align-self:stretch !important;
  text-align:left !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.ob-split-left--legal .ob-split-copy h1,
.ob-split-left--legal .ob-split-copy .sub{
  text-align:left !important;
  align-self:flex-start !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.ob-split-copy h1{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:700;
  letter-spacing:-.035em;
  margin:0 0 14px;
  color:#fff;
  line-height:1.12;
  width:auto;
  max-width:14ch;
}
.ob-split-copy .sub{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.55;
  max-width:28ch;
}
.ob-split-left--legal .ob-split-actions{
  margin-top:28px;
  padding-top:0;
  align-items:stretch;
  align-self:flex-start !important;
  max-width:240px;
  width:100%;
  margin-left:0 !important;
}
.ob-split-left--legal .ob-split-brand{
  align-self:flex-start !important;
  margin-left:0 !important;
}

.ob-sheet-cta--soft{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.34);
  color:#fff;
  box-shadow:0 10px 28px rgba(14,29,84,.18), 0 1px 0 rgba(255,255,255,.12) inset;
  backdrop-filter:blur(10px);
}
.ob-sheet-cta--soft:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}
.ob-sheet-cta--soft .ob-welcome-arrow{stroke:#fff}
.ob-sheet-cta--soft:hover .ob-welcome-arrow{transform:translateY(3px);stroke:#fff}
.ob-sheet-cta--solid{
  background:#fff;
  border-color:rgba(255,255,255,.7);
  color:#111;
  box-shadow:0 16px 36px rgba(14,29,84,.28), 0 1px 0 rgba(255,255,255,.9) inset;
}
.ob-sheet-cta--solid:hover{
  background:#fff;
  color:#000;
}
.ob-sheet-cta--solid .ob-welcome-arrow{stroke:#111}
.ob-sheet-cta--solid:hover .ob-welcome-arrow{transform:translateX(4px);stroke:#000}

.ob-policy-scroll{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,23,42,.22) transparent;
}

.ob-split-right--form{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ob-profile-form--row{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:36px;
  max-width:560px;
  width:100%;
  padding-top:0;
}
.ob-profile-photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
button.ob-avatar{
  border:none;padding:0;cursor:pointer;
  width:112px;height:112px;
  position:relative;overflow:hidden;
}
.ob-avatar-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.48);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
}
.ob-avatar-overlay svg,
.ob-avatar-overlay i[data-lucide]{
  width:26px;height:26px;stroke:#fff;stroke-width:1.8;fill:none;
}
@media (hover:hover){
  .ob-avatar:hover .ob-avatar-overlay{
    opacity:1;
    visibility:visible;
  }
}
.ob-avatar-change{
  appearance:none;
  border:0;
  background:transparent;
  padding:2px 0;
  margin:0;
  color:#86868b;
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:-.011em;
  line-height:1.25;
  cursor:pointer;
  text-decoration:none;
  transition:color .16s ease;
}
.ob-avatar-change:hover,
.ob-avatar-change:focus-visible{
  color:#1d1d1f;
  text-decoration:none;
}
.ob-avatar-change:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:3px;
  border-radius:4px;
}
.ob-profile-fields{
  flex:1 1 auto;
  width:100%;
  max-width:280px;
}
.ob-sheet:has(.ob-profile-fields) .ob-split-left .error-msg,
.ob-sheet:has(.ob-profile-fields) .ob-split-left .ob-err{
  display:none!important;
}
.ob-profile-fields .field.is-invalid label{color:#c5221f}
.ob-profile-fields .field.is-invalid input,
.ob-profile-fields .field.is-invalid .ob-at-wrap > input{
  border-color:#c5221f!important;
  box-shadow:0 0 0 3px rgba(197,34,31,.16)!important;
  background:#fff7f6!important;
}
.ob-profile-fields .field.is-invalid input:focus,
.ob-profile-fields .field.is-invalid .ob-at-wrap > input:focus{
  border-color:#c5221f!important;
  box-shadow:0 0 0 3px rgba(197,34,31,.22)!important;
}
.ob-field-hint{
  margin-top:6px;
  font-size:12px;
  font-weight:550;
  letter-spacing:-.01em;
  color:#c5221f;
  line-height:1.3;
}
.ob-profile-fields > .ob-err{margin:0 0 4px}

@media (max-width:820px){
  .ob-profile-form--row{flex-direction:column;gap:22px}
  .ob-profile-fields{max-width:100%}
}