:root {
  --brand-300: #7b9ffd;
  --brand-500: #4473fd;
  --brand-600: #3e68e2;
  --brand-700: #3050aa;

  --primary: #2b3039;
  --secondary: #545563;
  --tertiary: #757f91;
  --disabled: #9ca3af;
  --transparent-white-20: rgba(255, 255, 255, 0.2);

  --bg-selected: #f8faff;
  --bg-selected-hover: #f1f5ff;
  --border-selected: #dee7ff;
  --border-primary: #e3e3e3;
  --bg-interactive-hover: #f3f4f6;
  --bg-interactive-pressed: #e4e4e7;
  --bg-table-label: #f2f3f7;
  --bg-disabled: #eeeeee;

  --border-primary: #ebf0ff;
  --border-primary-hover: #c0d1fe;
  --border-primary-pressed: #a2bcfe;
  --border-secondary: #e5e7eb;
  --border-secondary-hover: #d1d5db;
  --border-secondary-pressed: #9ca3af;
  --border-tertiary: #d1d5db;
  --border-focus-ring: #e1e5ff;
  --card-border: #e5e5ec;

  --divide-100: #f3f4f6;
  --divide-200: #e5e7eb;
  --divide-300: #d1d5db;
}

.sr-only {
  overflow: hidden;

  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;

  white-space: nowrap;

  clip: rect(0, 0, 0, 0);
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

.form-row:not(.search-row) > .container-content:not(.iframe-container).page-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 4rem 0 12rem 0;
}

.page-container .form-col > .view-compo {
  margin: 0;
}

.form-row,
.form-col,
.container-content {
  min-height: 0 !important;
}

.solution-category {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;

  width: fit-content;
  height: 5.2rem;
  padding: 0 2.4rem;
  margin: 0 auto;
  border-radius: 999rem;
  margin-bottom: 3.2rem;
  background-color: #fff;
  border: 0.1rem solid var(--divide-300);
}

.solution-category .solution-category-number,
.solution-category .solution-category-title {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 400;
  color: var(--brand-500);
}

.solution-category::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5.6rem;
  display: block;
  width: 0.1rem;
  height: 2rem;
  background-color: var(--divide-200);
}

.section-header {
  text-align: center;
  margin-bottom: 4.8rem;
}

.section-title {
  font-size: 4rem;
  line-height: 5.2rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
  color: var(--primary);
}

.section-description {
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: 400;
  color: var(--tertiary);
}

.feature-list {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4.8rem;
}

.feature-item {
}

.feature-item-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.2rem;
  background-color: #ecf1ff;
}

.feature-item-icon .material-symbols-rounded {
  font-size: 2.4rem;
  color: var(--brand-500);
}

.feature-item-title {
  display: block;
  font-size: 2.4rem;
  line-height: 3.2rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
  color: var(--primary);
}

.feature-item-description {
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--secondary);
}