/* System settings: client portal welcome designer. */

.welcome-designer {
 display: grid;
 gap: 20px;
}

.welcome-designer-form {
 display: grid;
 gap: 12px;
}

.welcome-feature-row {
 display: grid;
 gap: 8px;
 padding: 12px 0;
 border-top: 1px solid var(--border);
}

.welcome-feature-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.welcome-preview {
 width: 100%;
 max-width: 420px;
 background: #fff;
 color: #1c1c1c;
 border: 1px solid var(--border);
 border-radius: 16px;
 overflow: hidden;
 font-family:
  Inter,
  -apple-system,
  'Segoe UI',
  Roboto,
  sans-serif;
}

.welcome-preview-bar {
 height: 6px;
}

.welcome-preview-body {
 padding: 20px 22px 22px;
}

.welcome-preview-logo {
 width: 132px;
 max-width: 100%;
 height: auto;
 display: block;
}

.welcome-preview-logo-fallback {
 width: 132px;
 height: 36px;
 border-radius: 8px;
 background: #edf1ef;
 color: #5b6560;
 font-size: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.welcome-preview-eyebrow {
 margin: 18px 0 8px;
 font-family: Jost, Inter, sans-serif;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.22em;
}

.welcome-preview h3 {
 margin: 0;
 font-family: Jost, Inter, sans-serif;
 font-weight: 500;
 font-size: 22px;
 line-height: 1.2;
 letter-spacing: -0.01em;
}

.welcome-preview-lead,
.welcome-preview-note,
.welcome-preview-help {
 margin: 10px 0 0;
 font-size: 13px;
 line-height: 1.5;
 color: #4d5551;
}

.welcome-preview-uses {
 margin-top: 14px;
 border: 1px solid #e3e7e5;
 border-radius: 12px;
 overflow: hidden;
}

.welcome-preview-use {
 display: flex;
 gap: 10px;
 padding: 12px;
}

.welcome-preview-use
 + .welcome-preview-use {
 border-top: 1px solid #edf0ee;
}

.welcome-preview-ico {
 width: 32px;
 height: 32px;
 border-radius: 8px;
 display: grid;
 place-items: center;
 flex: none;
}

.welcome-preview-ico svg {
 width: 16px;
 height: 16px;
}

.welcome-preview-use strong {
 display: block;
 font-size: 14px;
}

.welcome-preview-use p {
 margin: 2px 0 0;
 font-size: 12px;
 color: #5b6560;
}

.welcome-preview-cta {
 margin-top: 16px;
 height: 40px;
 padding: 0 16px;
 border: 0;
 border-radius: 10px;
 color: #fff;
 font: inherit;
 font-size: 14px;
 font-weight: 600;
}

.welcome-preview code {
 font-family:
  ui-monospace, Menlo, monospace;
 color: #1c1c1c;
}