/* First visit: the four questions use the same company form as Settings. */
.app.on.onboarding { display:block; background:#fff; color:#171717; }
.onboarding > aside,
.onboarding > .sidebar-backdrop,
.onboarding > .mobile-menu-toggle { display:none !important; }
.onboarding > main { width:100%; max-width:none; min-height:100dvh; padding:0; }
.onboarding #page-start.on { position:relative; display:block; min-height:max(440px,100dvh); margin:0; overflow:hidden; }
.onboarding-wizard { position:relative; min-height:max(440px,100dvh); }
.onboarding-logout { position:absolute; top:20px; right:24px; padding:5px; border:0; background:transparent; color:#777; font-size:11px; cursor:pointer; }
.onboarding-logout:hover { color:#111; text-decoration:underline; }
.onboarding-wizard[hidden], .onboarding-welcome[hidden],
.onboarding-actions [hidden], .onboarding .field[hidden] { display:none !important; }
.onboarding #onboarding-title {
  position:absolute; top:27.5%; left:50%; width:max-content; max-width:calc(100% - 36px);
  transform:translateX(-50%); margin:0; color:#090909; text-align:center;
  font-family:Arial,sans-serif; font-size:38px; font-weight:700; line-height:1.25; letter-spacing:-.02em;
}
.onboarding #onboarding-title:focus { outline:none; box-shadow:none; }
.onboarding-progress { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.onboarding #companyForm { width:100%; }
.onboarding .company-fields { position:static; width:100%; margin:0; padding:0; }
.onboarding #companyDetailsCard {
  position:absolute; top:46.5%; left:50%; transform:translateX(-50%);
  width:min(360px,calc(100vw - 40px)); margin:0; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.onboarding #companyDetailsCard h3,
.onboarding #companyDetailsCard .hint,
.onboarding .company-fields > .card:not(#companyDetailsCard) { display:none; }
.onboarding #companyDetailsCard .grid2 { display:block; }
.onboarding #companyDetailsCard .field { margin:0; }
.onboarding #companyDetailsCard label { margin:0 0 6px; color:#303030; font-size:13px; font-weight:400; line-height:1.25; }
.onboarding #companyDetailsCard input {
  display:block; width:100%; height:46px; padding:10px 12px;
  border:1px solid #dfdfdf; border-radius:8px; background:#fff !important;
  box-shadow:0 1px 3px #00000012; color:#171717; font-size:14px; line-height:22px;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.onboarding #companyDetailsCard input::placeholder { color:#333; opacity:1; }
.onboarding #companyDetailsCard input:hover { border-color:#bcbcbc; }
.onboarding #companyDetailsCard input:focus { outline:none; border-color:#8c8c8c; box-shadow:0 0 0 3px #00000012; transform:translateY(-1px); }
.onboarding-actions { margin-top:16px; }
.onboarding .onboarding-actions {
  position:absolute; top:74.5%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; width:min(360px,calc(100vw - 40px)); margin:0;
}
.onboarding .onboarding-actions .btn {
  display:grid; place-items:center; width:86px; height:42px; min-height:42px;
  padding:0; border:0; border-radius:24px; background:#282828; color:#fff;
  font-size:14px; font-weight:600; line-height:1;
  transition:background .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.onboarding .onboarding-actions .btn:hover { background:#111; box-shadow:0 7px 16px #0002; transform:translateY(-2px); }
.onboarding .onboarding-actions .btn:active:not(:disabled) { box-shadow:0 2px 6px #0002; transform:translateY(0) scale(.97); }
.onboarding .onboarding-actions .btn svg { width:21px; height:21px; }
.onboarding .onboarding-actions #saveOnboard { width:auto; min-width:180px; padding:0 18px; margin:0; }
.onboarding .onboarding-back {
  position:absolute; left:0; padding:5px 0; border:0; background:transparent;
  color:#555; font-size:13px; cursor:pointer;
}
.onboarding .onboarding-back:hover { color:#111; text-decoration:underline; }
.onboarding #onbMsg { position:absolute; top:81%; left:50%; transform:translateX(-50%); width:min(320px,calc(100vw - 40px)); margin:0; font-size:12px; }
.onboarding #retryOnboard { position:absolute; top:74.5%; left:50%; transform:translateX(-50%); width:auto; margin:0; }
.onboarding-welcome {
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:24px;
  overflow:hidden; background:#fff; opacity:1; transition:opacity .36s cubic-bezier(.4,0,.2,1);
}
.onboarding-welcome::before {
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(105deg,transparent 44%,#a7c9ff08 48%,#adbbff12 50%,#a7c9ff08 52%,transparent 56%);
  animation:onboarding-ambient-sweep 1.3s .12s cubic-bezier(.2,.7,.2,1) both;
}
.onboarding-welcome.is-leaving { opacity:0; pointer-events:none; }
.onboarding-welcome h1 {
  position:relative; max-width:700px; color:#111; text-align:center; font-size:clamp(26px,4vw,42px);
  font-weight:750; line-height:1.2; letter-spacing:-.04em;
  background:linear-gradient(105deg,#111 0%,#111 46%,#52647f 48.5%,#b6c6dc 50%,#52647f 51.5%,#111 54%,#111 100%);
  background-size:240% 100%; background-position:100% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:onboarding-greeting 1s cubic-bezier(.2,.8,.2,1) both,
    onboarding-light-sweep 1.05s .28s cubic-bezier(.25,.7,.25,1) both;
}
@keyframes onboarding-ambient-sweep {
  from { transform:translateX(-85%); }
  to { transform:translateX(85%); }
}
@keyframes onboarding-light-sweep {
  from { background-position:100% 50%; }
  to { background-position:0 50%; }
}
@keyframes onboarding-greeting {
  from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(3px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.onboarding-wizard.is-entering #onboarding-title {
  animation:onboarding-title-in .56s cubic-bezier(.2,.8,.2,1) both;
}
.onboarding-wizard.is-entering #companyDetailsCard {
  animation:onboarding-control-in .58s .08s cubic-bezier(.2,.8,.2,1) both;
}
.onboarding-wizard.is-entering .onboarding-actions {
  animation:onboarding-control-in .58s .16s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes onboarding-title-in {
  from { opacity:0; transform:translate(-50%,14px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@keyframes onboarding-control-in {
  from { opacity:0; transform:translate(-50%,16px); }
  to { opacity:1; transform:translate(-50%,0); }
}
.onboarding .msg.on { animation:onboarding-message-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes onboarding-message-in {
  from { opacity:0; transform:translate(-50%,8px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@media(max-width:600px) {
  .onboarding #onboarding-title { font-size:clamp(27px,8.3vw,33px); }
  .onboarding #companyDetailsCard { top:44%; }
  .onboarding .onboarding-actions, .onboarding #retryOnboard { top:71%; }
  .onboarding #onbMsg { top:79%; }
}
@media(prefers-reduced-motion:reduce) {
  .onboarding-welcome, .onboarding-welcome::before, .onboarding-welcome h1,
  .onboarding-wizard.is-entering #onboarding-title,
  .onboarding-wizard.is-entering #companyDetailsCard,
  .onboarding-wizard.is-entering .onboarding-actions,
  .onboarding .msg.on { animation:none !important; transition:none !important; }
  .onboarding-welcome h1 { background:none; -webkit-text-fill-color:currentColor; }
}
.preview-reset-onboarding {
  position:fixed; right:16px; bottom:16px; z-index:1001;
  padding:8px 12px; border:1px solid #ccc; border-radius:8px;
  background:#fff; color:#333; box-shadow:0 4px 16px #0002;
  font-size:12px; cursor:pointer;
}
.preview-reset-onboarding[hidden] { display:none; }
.preview-reset-onboarding:hover { background:#f4f4f4; }