.inclua-diagnostic-page {
  background: #e6e5e4;
  color: var(--color-text-primary);
}

.inclua-site-header {
  background: var(--color-surface-default);
}

.inclua-brand {
  color: var(--color-text-primary);
}



.inclua-diagnostic-welcome {
  background: var(--color-surface-default);
  min-height: 31.25rem;
  padding: var(--spacing-20) 0 var(--spacing-28);

  & .inclua-diagnostic-welcome__content {
    max-width: 66.75rem;
  }

  & .inclua-diagnostic-welcome__copy {
    display: grid;
    gap: var(--spacing-4);
  }

  & h1 {
    font-size: var(--font-size-heading-1);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--line-height-heading-1);
    margin: 0 0 var(--spacing-8);
  }

  & p {
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin: 0;
    max-width: 65.25rem;
  }
}

.inclua-diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-11);
}

.inclua-diagnostic-start {
  min-height: 34.5rem;
  padding: var(--spacing-20) 0 var(--spacing-30);

  & h1 {
    font-size: var(--font-size-heading-1);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--line-height-heading-1);
    margin: 0 0 var(--spacing-8);
  }

  & h2 {
    font-size: var(--font-size-heading-2);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--line-height-heading-2);
    margin: 0 0 var(--spacing-8);
  }

  & p {
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin: 0;
    max-width: 65.25rem;
  }

  & .inclua-diagnostic-start__form {
    max-width: 66.75rem;

    &.inclua-diagnostic-start__form--with-theme {
      & .inclua-diagnostic-field-service {
        grid-column: 3;
      }
    }

    & .inclua-button {
      margin-top: var(--spacing-8);
    }
  }

  & .inclua-diagnostic-start__content {
    max-width: 66.75rem;
  }
}

.inclua-diagnostic-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  margin-top: var(--spacing-8);

  & .inclua-input,
  & .inclua-select {
    flex: 1 1 calc(50% - var(--spacing-6) / 2);
    min-width: 0;
  }

  & .inclua-input__label,
  & .inclua-select__label {
    color: #31302e;
  }

  & .inclua-input__control,
  & .inclua-select__control,
  & .inclua-select__native {
    background: #fff;
    border: 1px solid #7d7a74;
    border-radius: var(--radius-control);
    box-shadow: 0 1px var(--spacing-1) rgba(25, 33, 61, 0.08);
    font-size: var(--font-size-label);
    font-weight: 400;
    line-height: var(--line-height-label);
    min-height: 3.25rem;
    padding: var(--spacing-3) var(--spacing-4);
    transition: border-color var(--transition-duration-fast) var(--transition-timing-default),
                box-shadow var(--transition-duration-fast) var(--transition-timing-default);

    &:focus {
      outline: none;
      border-color: var(--color-action-primary, #31302e);
      box-shadow: 0 0 0 3px rgba(49, 48, 46, 0.16), var(--shadow-control);
    }
  }

  & .inclua-input.is-hidden {
    display: none;
  }
}