/* Fléx Performance additions to the shared Flex website styles: sign-up and demo pages. */
.flx-signup-grid { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.flx-signup-points { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.flx-signup-points li { display: flex; gap: 12px; color: var(--flx-cloud-ink, #10243e); line-height: 1.5; }
.flx-signup-points li > span { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 125, 251, .1); color: var(--flx-cloud-brand-bright, #007dfb); }
.flx-signup-points strong { display: block; }
.flx-signup-points small { color: #5b6f86; font-size: 13px; }
.flx-signup-form h3 { margin: 28px 0 12px; color: var(--flx-cloud-ink, #10243e); font-size: 15px; font-weight: 700; }
.flx-signup-form h3:first-of-type { margin-top: 0; }
.flx-signup-form .flx-erp-modules { margin: 0; }
.flx-signup-hint { display: block; margin-top: 5px; color: #5b6f86; font-size: 11px; font-weight: 500; }
.flx-signup-summary { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: #f3f7fb; color: #344a64; font-size: 13px; }
.flx-signup-summary strong { color: var(--flx-cloud-ink, #10243e); }
.flx-signup-credentials { display: grid; gap: 12px; margin: 26px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flx-signup-credentials div { padding: 18px; border-radius: 14px; background: #f3f7fb; }
.flx-signup-credentials small { display: block; color: #5b6f86; font-size: 12px; }
.flx-signup-credentials strong { display: block; margin-top: 4px; color: var(--flx-cloud-ink, #10243e); font-size: 22px; font-weight: 750; word-break: break-all; }
.flx-signup-errors { margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; background: #fdecee; color: #a4263a; font-size: 13px; }
@media (max-width: 900px) {
    .flx-signup-grid { grid-template-columns: 1fr; }
    .flx-signup-credentials { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .flx-signup-form .flx-m-form-grid { grid-template-columns: 1fr; }
}

/* The showcase stretches its images to full width; the logo inside the product mockup stays small. */
.flx-m-workspace-showcase .flx-m-appbar img { width: 42px; display: inline-block; border-radius: 0; }