/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/sign-in/sign-in.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Sign in: the intro beside the form, filling the page width; stacked on phones. Every visual comes from the system;
   the form card follows the Settings form sections, stacked in one column. */
.sign-in .brand { padding: 0; }
.sign-in-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s48); align-items: start; padding-top: var(--s32); }
.sign-in-intro { display: flex; flex-direction: column; gap: var(--s12); max-width: 60ch; }
.sign-in-form .form-section { display: flex; flex-direction: column; gap: var(--s20); padding: var(--s24) var(--pad); }
.sign-in-form .form-section header p { font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: var(--s4); }
.sign-in-form .fields { display: flex; flex-direction: column; gap: var(--s16); }
@media (max-width: 767px) {
  .sign-in-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s24); padding-top: 0; }
}